滚动到顶部的几种实现方式


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

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>
 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM