通过监听页面滚动事件，动态控制返回顶部按钮的显示/隐藏，并结合 css 过渡实现平滑淡入淡出效果，提升用户体验。

通过监听页面滚动事件，动态控制返回顶部按钮的显示/隐藏，并结合 css 过渡实现平滑淡入淡出效果，提升用户体验。

要让“返回顶部”按钮仅在用户向下滚动一定距离后才出现，并在回到顶部时自动隐藏，同时支持优雅的淡入淡出动画，关键在于滚动状态检测 + CSS 动画控制 + 平滑滚动逻辑三者的协同。

✅ 核心实现思路

• 使用 window.onscroll 监听滚动行为；
• 通过 document.body.scrollTop 或 document.documentElement.scrollTop 获取垂直滚动偏移量（兼容不同浏览器）；
• 当滚动距离 > 20px 时，为按钮添加 .show 类；否则移除；
• 利用 CSS 的 opacity 和 transition 实现淡入淡出，避免生硬的 display: none/block 切换。

? 完整代码示例

HTML 结构（注意：按钮需有唯一 ID，且置于 body 内合适位置）：

JS带缩略图平滑滚动相册特效

JS带缩略图平滑滚动相册特效，带左右按钮，多图，左右平滑滚动，效果流畅。

下载

<div id="top">首页顶部</div>
<div id="content" style="height: 2000px; background: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);"></div>
<button id="backToTopBtn" onclick="scrollToTop()">↑ 返回顶部</button>

JavaScript（推荐放在