jq返回顶部

jq相对于原生用的代码要少一些，比如返回顶部

html部分

<div class="backTop" id="backTop" style="display:none;"></div>

css部分

.backTop{
    width:45px;
    height:45px;
    background:#615f5f;
    opacity: .7;
    position:fixed;
    right:1%;
    bottom:12%;
    z-index:999;
    cursor:pointer;
}

.backTop:hover{
    background:#464444;
}

.backTop:hover:after{
    border-bottom:.2rem solid #0188cc;
    border-left:.2rem solid #0188cc;

}

.backTop:after{
    display:inline-block;
    content:'';
    width:1rem;
    height:1rem;
    border-bottom:.2rem solid #fff;
    border-left:.2rem solid #fff;
    transform:scaleX(0.5) rotateZ(138deg);
    -webkit-transform:scaleX(0.7) rotateZ(136deg);
    position:absolute;
    left:13px;
    top:19px;

}

js部分

$(window).scroll(function(){
    var scrollValue = $(window).scrollTop();
    scrollValue >400 ? $('#backTop').fadeIn():$('#backTop').fadeOut();
});
$('#backTop').click(function(){
    $('html,body').animate({scrollTop:0},300);
});

 

转载于:https://www.cnblogs.com/theblogs/p/9943785.html