滚动到顶部主要实现方式三种
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>