返回顶部JS

时间:2020-06-18 16:02:37   收藏:0   阅读:71

CSS

#back-to-top{
    position: fixed;
    bottom:20px;
    right: 20px;
}

JS

技术分享图片
var backBtn=$("#back-to-top");
function backToTop() {
    $("html,body").animate({
        scrollTop: 0
    }, 800);
}
backBtn.on("click", backToTop);

// 当滚动条的垂直位置大于浏览器所能看到的页面的那部分的高度时,回到顶部按钮就显示
$(window).on("scroll", function () {
    if ($(window).scrollTop() > $(window).height())
        backBtn.fadeIn();
    else
        backBtn.fadeOut();
});

// 触发滚动事件,避免刷新的时候显示回到顶部按钮
$(window).trigger("scroll");
技术分享图片

原文:https://www.cnblogs.com/onesea/p/13157936.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!