首页 > Web开发 > 详细

返回顶部JS

时间:2020-06-18 16:02:37      阅读:70      评论:0      收藏:0      [点我收藏+]

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");
技术分享图片

返回顶部JS

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!