滚动到顶部主要实现方式三种

1.<a href="#"></a>或者<a href="#top"></a>或者<a href="javascript:scrollTo(0,0)"></a>

2. window.scrollTo(0, 0); 

3.document.body.scrollIntoView()

使用上面的方法是直接到顶部的,有的时候可能需要平滑些。

1.requestAnimationFrame

const scrollToTop = () => { 
 const c = document.documentElement.scrollTop || document.body.scrollTop; 
 if (c > 0) { 
 window.requestAnimationFrame(scrollToTop); 
 window.scrollTo(0, c - c / 8); 
 } 
 };

这个能平滑回到顶部,可以改变8的值

2.css

html {
            scroll-behavior: smooth;
        }

通过css实现,兼容性可能不太好。

3.scrollTo传入对象

window.scrollTo({
            left: 0,
            top: 0,
            behavior: 'smooth'
        })
scrollTo可以传入一个对象,left对应x,top对应y,behavior滚动行为,有的浏览器有问题。
我试了下a标签也可以这么写<a href="javascript:window.scrollTo({left: 0, top: 0,behavior: 'smooth' })"></a>
 
posted on 2021-02-26 11:19  双木之下藏倒影  阅读(2441)  评论(0编辑  收藏  举报