📅 最后修改于: 2023-12-03 14:56:10.241000 🧑 作者: Mango
网页中经常会出现需要滚动到页面顶部的情况，因此实现一个滚动页面顶部的 JavaScript 功能十分必要。以下是实现滚动顶部功能的 JavaScript 代码：
// 监听窗口的滚动事件
window.onscroll = function() {
// 获取用于回到顶部的元素
var topButton = document.getElementById('top-button');
// 滚动超过 300px 显示回到顶部按钮
if (document.documentElement.scrollTop > 300 || document.body.scrollTop > 300) {
topButton.style.display = 'block';
} else {
topButton.style.display = 'none';
}
};
// 点击回到顶部按钮触发的事件
function scrollToTop() {
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo (0, currentScroll - (currentScroll / 5));
}
}
这段 JavaScript 代码监听了窗口的滚动事件，当滚动超过 300px 时，会显示一个回到顶部的按钮。点击该按钮会触发 scrollToTop 函数，并通过 window.requestAnimationFrame 方法实现平滑滚动回到顶部。
<!-- HTML 中的回到顶部按钮元素 -->
<button id="top-button" onclick="scrollToTop()" style="display:none;">回到顶部</button>
同时，需要在 HTML 中添加一个 ID 为 top-button 的按钮元素，并添加 onclick 事件触发 scrollToTop 函数，以便用户通过点击按钮回到页面顶部。
将上述 JavaScript 代码和 HTML 代码添加到网页中即可实现滚动顶部的功能。
<!DOCTYPE html>
<html>
<head>
<title>滚动顶部 JavaScript</title>
<script>
// JavaScript 代码
</script>
</head>
<body>
<!-- HTML 代码 -->
</body>
</html>
以上就是实现滚动顶部功能的 JavaScript 和 HTML 代码，兼容性较好，能够适应大部分主流浏览器。