回到顶部悬浮按钮通过原生JS实现：1.创建固定定位按钮并初始隐藏；2.监听滚动并用requestAnimationFrame防抖控制显隐；3.点击触发scrollTo平滑滚动至顶部；4.添加无障碍属性、悬停动画等体验优化。
用 DOM 操作实现回到顶部悬浮按钮，核心是监听滚动、动态控制按钮显隐，并绑定点击事件触发平滑滚动。不需要框架，纯原生 JS 即可完成。
1. 创建并插入悬浮按钮元素
用 document.createElement 创建按钮，设置基础样式（固定定位、右下角、圆角、阴影等），再用 appendChild 插入到 body 末尾：
const backToTopBtn = document.createElement('button');
backToTopBtn.id = 'back-to-top';
backToTopBtn.textContent = '↑';
backToTopBtn.style.cssText = `
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
background: #333;
color: white;
border: none;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
display: none; /* 初始隐藏 */
z-index: 1000;
`;
document.body.appendChild(backToTopBtn);
2. 监听滚动，控制按钮显示/隐藏
通过 window.scrollY 或 document.documentElement.scrollTop 获取当前滚动距离，设定阈值（如 300px）来决定是否显示按钮：
- 使用
scroll事件监听，注意加防抖或节流更佳（避免频繁触发） - 推荐用
requestAnimationFrame优化性能，或简单用setTimeout防抖 - 示例逻辑：滚动超过 300px 显示按钮，否则隐藏
let ticking = false;
function updateButtonVisibility() {
if (!ticking) {
requestAnimationFrame(() => {
const scrollY = window.scrollY || document.documentElement.scrollTop;
backToTopBtn.style.display = scrollY > 300 ? 'block' : 'none';
ticking = false;
});
ticking = true;
}
}
window.addEventListener('scroll', updateButtonVisibility);
3. 绑定点击事件，实现平滑回到顶部
点击按钮时，调用 window.scrollTo 并传入 { top: 0, behavior: 'smooth' } 实现原生平滑滚动：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 确保浏览器支持
behavior: 'smooth'（现代主流浏览器均支持） - 可添加
disabled状态防止快速连点重复触发 - 点击后自动隐藏按钮（可选，提升体验）
backToTopBtn.addEventListener('click', () => {
backToTopBtn.disabled = true;
window.scrollTo({ top: 0, behavior: 'smooth' });
<p>// 滚动结束后恢复按钮可用性
const onScrollEnd = () => {
if (window.scrollY === 0) {
backToTopBtn.disabled = false;
window.removeEventListener('scroll', onScrollEnd);
}
};
window.addEventListener('scroll', onScrollEnd);
});</p>4. （可选）增强体验的小细节
让按钮更友好，可补充以下操作：
- 鼠标悬停时添加背景色变化或缩放动画（用 CSS transition）
- 为按钮添加
aria-label="回到顶部"提升无障碍访问 - 移动端适配：调整尺寸和位置，例如
bottom: 20px; right: 20px; - 页面加载完成后再初始化（包裹在
DOMContentLoaded中）
backToTopBtn.setAttribute('aria-label', '回到顶部');
// 加入 CSS 过渡效果（在 style 中或外链 CSS）
backToTopBtn.style.transition = 'transform 0.2s, background 0.2s';
backToTopBtn.onmouseenter = () => backToTopBtn.style.transform = 'scale(1.1)';
backToTopBtn.onmouseleave = () => backToTopBtn.style.transform = 'scale(1)';
不复杂但容易忽略：DOM 插入顺序、滚动属性兼容性、平滑滚动的浏览器支持、以及防抖对性能的影响。按上面四步做，就能得到一个轻量、稳定、可访问的回到顶部按钮。
