当前位置：首页 > news >正文

【四种JavaScript 实现页面底部回到顶部功能的实现方式】

news 2025/9/16 21:36:24

JavaScript 实现页面底部回到顶部功能

以下是几种实现页面底部回到顶部功能的方法：

方法一：基础实现（点击按钮滚动到顶部）

<!DOCTYPE html>
<html>
<head><style>#backToTop {position: fixed;bottom: 20px;right: 20px;display: none;width: 50px;height: 50px;background-color: #333;color: white;text-align: center;line-height: 50px;border-radius: 50%;cursor: pointer;}</style>
</head>
<body><!-- 页面内容 --><div style="height: 2000px;">滚动测试内容...</div><!-- 回到顶部按钮 --><div id="backToTop">↑</div><script>const backToTopBtn = document.getElementById('backToTop');// 监听滚动事件window.addEventListener('scroll', function() {if (window.pageYOffset > 300) { // 滚动超过300px显示按钮backToTopBtn.style.display = 'block';} else {backToTopBtn.style.display = 'none';}});// 点击回到顶部backToTopBtn.addEventListener('click', function() {window.scrollTo({top: 0,behavior: 'smooth' // 平滑滚动});});</script>
</body>
</html>

方法二：更流畅的动画效果

// 使用requestAnimationFrame实现更流畅的滚动
function scrollToTop(scrollDuration) {const scrollStep = -window.scrollY / (scrollDuration / 15);const scrollInterval = setInterval(function() {if (window.scrollY !== 0) {window.scrollBy(0, scrollStep);} else {clearInterval(scrollInterval);}}, 15);
}// 使用示例
document.getElementById('backToTop').addEventListener('click', function() {scrollToTop(500); // 500ms内滚动到顶部
});

方法三：同时支持底部和顶部

// 同时支持滚动到底部和回到顶部
function toggleScrollButtons() {const backToTopBtn = document.getElementById('backToTop');const scrollToBottomBtn = document.getElementById('scrollToBottom');if (window.pageYOffset > 300) {backToTopBtn.style.display = 'block';scrollToBottomBtn.style.display = 'none';} else if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight - 100) {backToTopBtn.style.display = 'none';scrollToBottomBtn.style.display = 'block';} else {backToTopBtn.style.display = 'none';scrollToBottomBtn.style.display = 'none';}
}window.addEventListener('scroll', toggleScrollButtons);// 滚动到底部按钮
document.getElementById('scrollToBottom').addEventListener('click', function() {window.scrollTo({top: document.body.scrollHeight,behavior: 'smooth'});
});

方法四：使用CSS自定义属性控制

:root {--back-to-top-size: 50px;--back-to-top-color: #333;--back-to-top-hover-color: #555;
}#backToTop {position: fixed;bottom: 20px;right: 20px;display: none;width: var(--back-to-top-size);height: var(--back-to-top-size);background-color: var(--back-to-top-color);color: white;text-align: center;line-height: var(--back-to-top-size);border-radius: 50%;cursor: pointer;transition: background-color 0.3s;
}#backToTop:hover {background-color: var(--back-to-top-hover-color);
}