vue3 页面回到顶部（平缓滚动效果）

适用于vue2，自行修改调用的时机。

 要求：

 页面加载时如滚动条不在顶部或刷新页面时滚动条不在顶部将重置回顶部

 回到顶部时 缓慢滚回顶部 带有动画效果

 common.js

// 页面回到顶部（滚动效果）
export const handleScroll = () =>{
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    console.log(scrollTop, "scrollTop");
    if (scrollTop > 0) {
        const timeTop = setInterval(() =>{
            document.documentElement.scrollTop = document.body.scrollTop = scrollTop -= 50; //一次减50往上滑动
            if (scrollTop <= 0) {
                clearInterval(timeTop);
            }
        },
        10); //定时调用函数使其更顺滑
    }
};

xxx.vue文件 

<script setup>
import { handleScroll } from '@/util/common'
import { reactive, toRefs, onBeforeMount, onMounted, computed } from 'vue'

onMounted(async () => {
	//监听滚动事件
	window.addEventListener('scroll', handleScroll, { once: true })
})
</script>

这里说一下 dom.addEventListener()中的第三个参数的作用是什么？

 之前 addEventListener() 的参数约定是这样的：

el.addEventListener(type, listener, useCapture)

• el：事件对象
• type：事件类型，scroll、click、mouseover 等
• listener：事件处理函数，也就是事件触发后的回调
• useCapture：布尔值，是否是捕获型，默认 false（冒泡）

2015年底，为了扩展新的选项，DOM 规范做了修订： 

el.addEventListener(type, listener, {
    capture: false, // useCapture
    once: false,    // 是否设置单次监听
    passive: false  // 是否让阻止默认行为preventDefault()失效
})

 capture 和 once这两个属性就是字面意思，passive 具体有什么用？

 为了防止页面滚动，很多移动端页面都会监听 touchmove 等 touch 事件，像这样：

document.addEventListener("touchmove", function(e){
    e.preventDefault()
})

•  由于 touchmove 事件对象的 cancelable 属性为 true，也就是说它的默认行为可以被监听器通过 preventDefault() 方法阻止。那它的默认行为是什么呢，通常来说就是滚动当前页面（还可能是缩放页面），如果它的默认行为被阻止了，页面就必须静止不动。但浏览器无法预先知道一个监听器会不会调用 preventDefault()，它能做的只有等监听器执行完后再去执行默认行为，而监听器执行是要耗时的，有些甚至耗时很明显，这样就会导致页面卡顿。即便监听器是个空函数，也会产生一定的卡顿，毕竟空函数的执行也会耗时。
• 当设置了passive为true，则会忽略代码中的preventDefault(), 因此页面会变得更流畅。