“返回顶部”按钮的实现

最新推荐文章于 2025-05-26 23:59:04 发布

WittyLu

最新推荐文章于 2025-05-26 23:59:04 发布

阅读量2.3w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/baidu_28479651/article/details/60872046

js 专栏收录该内容

25 篇文章

订阅专栏

在很多地方，我们都会用到“返回顶部”按钮。那么这个要怎么实现呢？

1、html代码

<button class="back_to_top">返回顶部</button>

2、css代码

.back_to_top{
    position: fixed;
    bottom:30px;
    right: 30px;
    border:1px solid #888;
}

3、js代码

    var backButton=$('.back_to_top');
    function backToTop() {
        $('html,body').animate({
            scrollTop: 0
        }, 800);
    }
    backButton.on('click', backToTop);

    $(window).on('scroll', function () {/*当滚动条的垂直位置大于浏览器所能看到的页面的那部分的高度时，回到顶部按钮就显示 */
        if ($(window).scrollTop() > $(window).height())
            backButton.fadeIn();
        else
            backButton.fadeOut();
    });
    $(window).trigger('scroll');/*触发滚动事件，避免刷新的时候显示回到顶部按钮*/

要点：获取滚动条的垂直偏移，即当前页面顶端到整个页面顶端的距离 $(window).scrollTop() 或者$(document).scrollTop() ，但是前者更兼容

$(window).height() 获取当前浏览器窗口的大小，浏览器拉伸大小就会变

$(document).height() 获取整个文档的高度