返回顶部功能的实现

Posted 2020-06-21 RC7

实现该功能一共只需三步:

第一步: 在页面底部加入html代码

把下面的HTML加入到页面底部, 最好是紧挨着</body>标签:

<a href="#" class="go-top"><div></div></a>

第二步: 加入JS

if (jQuery(‘.go-top‘).length > 0) {
            jQuery(window).scroll(function () {
                if (jQuery(this).scrollTop() > 100) {
if(parseInt(jQuery(‘.go-top‘).css("right"))==-60){
jQuery(‘.go-top‘).animate({right:20},500);}
                }
                else {
if(parseInt(jQuery(‘.go-top‘).css("right"))==20){
jQuery(‘.go-top‘).animate({right:-60},500);}
                }
            });
            jQuery(‘.go-top‘).click(function () {
                jQuery("html,body").animate({
                    scrollTop: 0
                }, 800);
                return false;
            });
        }

第三步: 添加CSS

.go-top{    
position: fixed;
right: -60px;
bottom:20px;
z-index: 100;
}
.go-top div{
background-image:url(‘/wp-content/uploads/2015/07/gototop.png‘);
width:48px;
height:48px;
}

最后的效果看我的博客就知道了~