jq返回頂部
阿新 • • 發佈:2018-11-11
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); });