jq回到顶部按钮

最新推荐文章于 2022-05-17 20:33:28 发布

原创最新推荐文章于 2022-05-17 20:33:28 发布 · 276 阅读

1 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

28 篇文章

订阅专栏

jquery

9 篇文章

订阅专栏

博客可能围绕jQuery实现回到按钮的功能展开，在前端开发中，利用jQuery可以方便地实现回到顶部等类似按钮的交互效果，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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()  获取整个文档的高度