返回顶部按钮及js代码实现

最新推荐文章于 2023-03-28 17:32:34 发布

fed_jiao

最新推荐文章于 2023-03-28 17:32:34 发布

阅读量707

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/jiaojiao51290/article/details/119548715

版权

JavaScript DOM操作页面滚动返回顶部事件监听

关键词由CSDN通过智能技术生成

前端专栏收录该内容

48 篇文章 2 订阅

订阅专栏

<!-- 返回顶部按钮 -->
    <a href="javascript:;" class="backtotop" id="backtotop">
        返回<br>顶部
    </a>

    <script src="js/backtotop.js"></script>

// backtotop.js

(function() {
    var backtotop = document.getElementById('backtotop');

    var timer;

    // 返回顶部按钮的监听
    backtotop.onclick = function() {
        // 设表先关
        clearInterval(timer);
        // 设置定时器
        timer = setInterval(function() {
            document.documentElement.scrollTop -= 100;

            if (document.documentElement.scrollTop <= 0) {
                clearInterval(timer);
            }
        }, 20);
    };

    // 监听页面的滚动
    window.onscroll = function () {
        // 卷动值
        var scrollTop = document.documentElement.scrollTop || window.scrollY;

        // 页面没有卷动，那么返回顶部按钮就隐藏掉
        if (scrollTop == 0) {
            backtotop.style.display = 'none';
        } else {
            backtotop.style.display = 'block';
        }
    }
})();