实现该功能一共只需三步:
第一步: 在页面底部加入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; }
最后的效果看我的博客就知道了~
时间: 2024-10-21 09:42:04