用原生js写的返回顶部功能小组件
html
<div class="to-top" id="toTop"><i class="fa fa-arrow-up"></i></div>
为了实现一个当页面滚动超过100像素时隐藏的“返回顶部”按钮功能,您可以使用以下 JavaScript 代码。此代码侦听页面的滚动事件,并根据当前滚动位置显示或隐藏“返回顶部”按钮。
// 获取返回顶部按钮的元素
var toTopButton = document.getElementById('toTop');
// 检查滚动位置并更新按钮的显示状态
function checkScrollPosition() {
if (window.scrollY > 100) {
toTopButton.style.display = 'block';
} else {
toTopButton.style.display = 'none';
}
}
// 添加滚动事件监听器
window.addEventListener('scroll', checkScrollPosition);
// 点击按钮时页面滚动到顶部
toTopButton.onclick = function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
};
这段代码实现了以下功能:
当页面向下滚动超过100像素时,按钮会显示。
当页面滚动回小于100像素的位置时,按钮会隐藏。
点击按钮时,页面平滑滚动回顶部。
您只需将此代码添加到网页的 <script> 标签中或作为一个外部 JavaScript 文件。注意,由于这里没有提供 CSS 样式,您可能需要根据网页的具体布局和样式来调整按钮的初始显示状态(如 display: none)。
声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至201542412@QQ.com举报,一经查实,本站将立刻删除。
相关推荐
-
返回顶部简易代码
我们在做网站的时间,经常会遇到返回顶部的效果,鼠标滚动一定高度之后,会出现“返回顶部”的标签。“返回顶部”标签被固定到窗口的指定位置,位置始终不变。当滚动的距离...