最简单版本（纯JS，无动画）
这是最基础的实现,点击后瞬间回到顶部，适合对性能要求极高或不需要动画效果的场景。
（图片来源网络，侵删）
HTML:
在 <body> 标签内任意位置添加一个按钮。
<button id="backToTop" style="display: none; position: fixed; bottom: 20px; right: 20px; z-index: 1000;"> 回到顶部 </button>
注意：这里用内联样式简单设置，实际项目中建议用CSS类。
JavaScript:
将这段代码放在 <body> 标签结束前 </body> 之前，或者放在单独的JS文件中。
// 获取回到顶部按钮
const backToTopButton = document.getElementById('backToTop');
// 监听滚动事件
window.addEventListener('scroll', () => {
// 如果页面滚动超过100像素，则显示按钮，否则隐藏
if (window.scrollY > 100) {
backToTopButton.style.display = 'block';
} else {
backToTopButton.style.display = 'none';
}
});
// 点击按钮时，平滑滚动到顶部
backToTopButton.addEventListener('click', () => {
// 使用scrollTo方法，behavior: 'smooth' 实现平滑滚动
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
推荐版本（平滑滚动 + 隐藏/显示动画）
这是最常用、用户体验最好的版本，按钮会在页面滚动一定距离后淡入，点击后有平滑的滚动动画。
（图片来源网络，侵删）
HTML:
<!-- 建议使用一个图标库，Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <button id="backToTop" class="back-to-top"> <i class="fas fa-arrow-up"></i> </button>
CSS:
将这段CSS代码放入您的 <style> 标签或CSS文件中。
/* 回到顶部按钮样式 */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: #007bff; /* 按钮背景色 */
color: white; /* 按钮文字/图标颜色 */
border: none;
border-radius: 50%; /* 圆形按钮 */
cursor: pointer;
font-size: 20px;
display: none; /* 默认隐藏 */
opacity: 0; /* 初始透明度为0，用于动画 */
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
z-index: 1000;
}
.back-to-top:hover {
background-color: #0056b3; /* 鼠标悬停时的背景色 */
}
/* 当按钮需要显示时，添加这个类 */
.back-to-top.show {
display: block;
opacity: 1;
visibility: visible;
}
JavaScript:
const backToTopButton = document.querySelector('.back-to-top');
window.addEventListener('scroll', () => {
// 使用 classList 来控制显示/隐藏，比 style.display 更符合语义
if (window.scrollY > 300) { // 滚动超过300px时显示
backToTopButton.classList.add('show');
} else {
backToTopButton.classList.remove('show');
}
});
backToTopButton.addEventListener('click', () => {
// 平滑滚动到顶部
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
功能增强版（仅在向下滚动时显示）
这个版本更智能,它只在用户向下滚动页面时才显示“回到顶部”按钮，如果用户向上滚动（想继续浏览），按钮会自动隐藏，体验更佳。
（图片来源网络，侵删）
HTML 和 CSS 与 方案二 完全相同，只需替换下面的 JavaScript 代码即可。
JavaScript:
const backToTopButton = document.querySelector('.back-to-top');
let lastScrollTop = 0; // 用于记录上一次的滚动位置
window.addEventListener('scroll', () => {
// 获取当前滚动位置
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// 如果当前滚动位置大于300px，并且是向下滚动
if (scrollTop > 300 && scrollTop > lastScrollTop) {
backToTopButton.classList.add('show');
} else {
backToTopButton.classList.remove('show');
}
// 更新上一次的滚动位置
lastScrollTop = scrollTop;
});
backToTopButton.addEventListener('click', () => {
// 平滑滚动到顶部
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
如何使用
- 选择方案：根据您的需求选择以上任意一个方案。方案二是通用首选，方案三是体验优化版。
- 复制代码：
- 将 HTML 部分添加到您的网页文件中。
- 将 CSS 部分添加到您的样式表文件中。
- 将 JavaScript 部分添加到您的脚本文件中，或者直接放在
<body>标签的末尾。
- 自定义：修改CSS中的颜色、大小、位置等属性，使其符合您网站的设计风格。
- 图标库（可选）：如果您使用了方案中的图标（如
Font Awesome），请确保在您的<head>中引入了对应的CDN链接。
这样,一个功能完善、体验良好的“回到顶部”按钮就添加完成了！
