利用window.onscroll实现回到顶部按钮的显示与隐藏

回到顶部按钮的交互逻辑

目前主流网站普遍采用一种交互设计：当用户向下滚动页面至一定位置时，页面右下角会自动浮现“回到顶部”按钮或链接。用户点击该按钮后，页面将平滑跳转至顶部或预设的合适内容区域。

基于滚动事件的实现方案

要实现“回到顶部”按钮的自动显示与隐藏，核心在于监听页面的滚动行为。只需处理window.onscroll事件即可完成此功能，具体实现逻辑如下所示。

 
window.onscroll = function () {
if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
document.getElementById("scrollto").style.display = "block";
} 
} else {
document.getElementById("scrollto").style.display = "none";
} 
} 

其中，scrollto 代表页面中用于包裹“回到顶部”功能的容器元素（通常为div标签）。