返回顶部-

最新推荐文章于 2024-07-31 16:16:55 发布

哦豁*

最新推荐文章于 2024-07-31 16:16:55 发布

阅读量93

点赞数 1

文章标签： JavaScript 返回顶部滚动事件动画效果 DOM操作

本文链接：https://blog.csdn.net/m0_62351236/article/details/122315394

版权


    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');/*触发滚动事件，避免刷新的时候显示回到顶部按钮*/

要点：获取滚动条的垂直偏移，即当前页面顶端到整个页面顶端的距离 $(w i n d o w) . s c r o l l T o p () 或者$ (document).scrollTop() ，但是前者更兼容
$(window).height() 获取当前浏览器窗口的大小，浏览器拉伸大小就会变