1. 程式人生 > >jq返回頂部

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); });