您的位置:首页 > 教程笔记 > 前端笔记

用原生js写的返回顶部功能小组件

2023-11-22 21:24:59 前端笔记 196

  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)。

 

相关推荐

  • 返回顶部简易代码

    返回顶部简易代码

    我们在做网站的时间,经常会遇到返回顶部的效果,鼠标滚动一定高度之后,会出现“返回顶部”的标签。“返回顶部”标签被固定到窗口的指定位置,位置始终不变。当滚动的距离...

    建站教程 2020-10-21 09:18:37 160