VUE点击回到顶部（带动画过渡效果）

VUE点击回到顶部（带动画过渡效果）

监听路由返回顶部

在main.js中写入
// 路由变化跳转页面回到顶部
router.afterEach((to,from,next) => {
  window.scrollTo(0,0);
})

在同页面跳转没发生变化 建议使用


点击回到顶部（带动画过渡效果）

html

<div @click="backtop">
	<!--  点击跳转内容 -->
</div>

js

 methods: {
	//返回顶部
	backtop() {
	 let top = document.documentElement.scrollTop || document.body.scrollTop
	 // 实现滚动效果
	 const timeTop = setInterval(() => {
	   document.body.scrollTop = document.documentElement.scrollTop = top -= 50
	   if (top <= 0) {
	     clearInterval(timeTop)
	   }
	 }, 10)
 },
}

有什么问题欢迎评论留言，我会及时回复你的