前言

对于前端回到顶点顶部的其实应该分为两类，一类是整体页面进行滑动，而一类是固定住了其中一个div或其他的大小，滚动只在一个范围进行滚动，而不是整个页面进行滚动。
但是，在查找资料，发现很多都是只对整体页面进行滚动回到顶点，这不是我想要的；
于是，在下方我会归类出两个：

整体页面进行滚动置顶

当前页面局部区域进行滚动置顶

整体页面滚动回到顶点

获取滚动高度

要使得整体页面滚动回到顶点，首先，就需要获取你滚动的高度

document.body.scrollTop
document.documentElement.scrollTop

于是可以定义一个变量，写成以下：

let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

实例

<!-- 页面 -->
<template>
	<div>
		<div><button @click="goToTop">回到顶部</button></div>
	</div>
</template>
<!-- 功能js -->
<script>
export default {
data() {
    return {
    	topTimer: null,// 设置滚动定时器
    	scrollTop: 0, // 滚动高度
    }
   },
   methods: {
   		// 滚动置顶方法
   		goToTop() {
					// 获取滚动高度
		this.scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
		// 设置定时器滑动的高度
		let step = 50;
		// 设置定时器前先清空
		if (this.topTimer) {
		clearInterval(this.topTimer);
		this.topTimer = null;
		}
		// 设置定时器
		this.topTimer = setInterval(() => {
			// 每执行一次定时器减少滚动高度
			this.scrollTop -= step;
			//赋值减少后的滚动高度
			document.body.scrollTop = this.scrollTop;
			document.documentElement.scrollTop = this.scrollTop;
			// 当滚动高度小于等于0时，清除定时器
			if (this.scrollTop <= 0) {
				clearInterval(this.topTimer);
				this.topTimer = null;
				// 设置获取的滚动值为0
				this.scrollTop = 0;
			}
		})
		},
	},
	// 关闭页面清除定时器
	beforeDestroy() {
    	clearInterval(this.topTimer);
    	this.topTimer =null;
  },
}
</script>

局部区域滚动回到顶点

与整体页面滚动不同，局部区域进行滚动回到顶点，不是获取整体页面的滚动高度了，而是那个区域滚动的盒子的滚动高度
我们通过ref获取dom元素

<!-- 页面 -->
<template>
	<div>
		<!-- 假定该div为局部滚动的盒子-->
		<div ref="scroll"></div>
	</div>
</template>

然后使用

let scrollTop = this.$refs.scroll.scrollHeight

实例

<!-- 页面 -->
<template>
	<div>
		<!-- 假定该div为局部滚动的盒子-->
		<div ref="scroll"></div>
		<button @click="goToTop">回到顶部</button>
	</div>
</template>
<!-- 功能js -->
<script>
export default {
data() {
    return {
    	topTimer: null,// 设置滚动定时器
    	scrollTop: 0, // 滚动高度
    }
   },
   methods: {
    // 回到顶部
    toTop() {
    // 获取滚动高度
      this.scrollTop = this.$refs.scroll.scrollTop;
      // 定时滑动的高度
      let step = 50;
      console.log("scrollTop:", this.scrollTop);
      // 先清空定时器
      if (this.topTimer) {
        clearInterval(this.topTimer);
        this.topTimer = null;
      }
      // 设置定时器
      this.topTimer = setInterval(() => {
      // 赋值减少滚动高度
        this.scrollTop -= step;
        this.$refs.scroll.scrollTop = this.scrollTop;
        // 当滚动高度小于等于0清除定时器
        if (this.scrollTop <= 0) {
          clearInterval(this.topTimer);
          this.topTimer = null;
          // 赋值滚动高度0
          this.scrollTop = 0;
        }
      }, 10);
    },
	},
	// 关闭页面清除定时器
	beforeDestroy() {
    	clearInterval(this.topTimer);
    	this.topTimer =null;
  },
}
</script>