本文介绍如何使用JavaScript监听window.onscroll事件，根据页面滚动距离动态控制“回到顶部”按钮的显示与隐藏。通过判断scrollTop值是否超过设定阈值，切换元素display属性，实现流畅的用户交互体验。
回到顶部按钮的交互逻辑
目前主流网站普遍采用一种交互设计：当用户向下滚动页面至一定位置时，页面右下角会自动浮现“回到顶部”按钮或链接。用户点击该按钮后，页面将平滑跳转至顶部或预设的合适内容区域。
基于滚动事件的实现方案
要实现“回到顶部”按钮的自动显示与隐藏，核心在于监听页面的滚动行为。只需处理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标签）。