页面滚动事件和利用JS实现回到顶部效果

时间:2024-07-14 23:04:14

页面滚动
事件:window.onscroll
获得页面滚动位置:document.body.scrollTop;

HTML代码:

页面滚动事件和利用JS实现回到顶部效果

页面滚动事件和利用JS实现回到顶部效果

这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名设置为top的话,就出错,都是小坑。

我们知道可以利用a标签的#回到顶部效果,但是速度过快,导致用户体验不是太好,这里,可以利用JS实现回到顶部的效果:

页面滚动事件和利用JS实现回到顶部效果

这是最终些的代码,感觉代码过于冗余,后面想办法完善下。