js返回顶部按钮

返回顶部模块

你可以使用 JavaScript 和 CSS 来实现滚动到底部时显示侧边栏，并点击返回顶部按钮返回页面顶部的效果。下面是一个简单的示例代码：

HTML：

<!DOCTYPE html>
<html>
<head><style>#sidebar {position: fixed;top: 50%;right: 10px;transform: translateY(-50%);width: 100px;height: 200px;background-color: #ccc;display: none;}#backToTop {position: fixed;bottom: 20px;right: 20px;display: none;}</style>
</head>
<body><div id="sidebar">侧边栏内容</div><button id="backToTop">返回顶部</button><!-- 页面内容 --><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu risus vel arcu gravida iaculis. Ut fringilla semper tellus vitae ornare. Donec fermentum mauris in nisl ullamcorper, eget mollis nunc viverra. Quisque luctus enim a finibus cursus. Nam tincidunt nulla non efficitur ultrices. Phasellus nec ligula vel metus rutrum malesuada.</p><p>Curabitur non dignissim eros. Nullam tempor mauris lectus, iaculis pellentesque erat posuere cursus. Proin elementum ex a urna cursus, ut malesuada turpis eleifend. Sed varius sem et imperdiet tempor. Fusce ac semper enim.</p><!-- ... --><script src="script.js"></script>
</body>
</html>

JavaScript（在 <script> 标签或外部脚本文件中）：

window.addEventListener('scroll', function() {var sidebar = document.getElementById('sidebar');var backToTopButton = document.getElementById('backToTop');if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {sidebar.style.display = 'block';} else {sidebar.style.display = 'none';}if (window.scrollY > 0) {backToTopButton.style.display = 'block';} else {backToTopButton.style.display = 'none';}
});document.getElementById('backToTop').addEventListener('click', function() {window.scrollTo({ top: 0, behavior: 'smooth' });
});

这段代码使用了 window 对象的 scroll 事件来监听页面滚动事件。当页面滚动到底部时，侧边栏会显示出来；当页面顶部时，返回顶部按钮会显示出来。点击返回顶部按钮时，使用 window.scrollTo() 方法将页面平滑滚动到顶部。

注意：你可能需要将 JavaScript 代码放在 <body> 结束标签之前，或者在 DOM 加载完成后执行脚本（例如使用 DOMContentLoaded 事件）以确保正确获取元素。

解释这段代码的作用if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {这段代码的作用是判断页面是否已经滚动到了底部。具体来说，它使用了以下值进行比较：

window.innerHeight：表示浏览器窗口的视口高度，即用户当前可见的页面区域的高度。
window.scrollY：表示页面在垂直方向已经滚动的距离。
document.body.offsetHeight：表示整个文档的高度，包括了滚动条未显示的部分。

当满足条件 window.innerHeight + window.scrollY >= document.body.offsetHeight 时，就意味着滚动条已经滚动到了页面底部。这是因为 window.innerHeight + window.scrollY 表示当前视口底部相对于页面顶部的距离，而 document.body.offsetHeight 表示整个页面的高度。当这两者之和大于等于页面的总高度时，就表示用户已经滚动到了页面底部。

在实际应用中，可以利用这个判断来触发一些特定的操作或者显示相关的内容，比如加载更多内容、显示返回顶部按钮等。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/171288.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！