JS
$(function(){
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#backtop").css("bottom","1px");
}
else
{
$("#backtop").css("bottom","-100px");
}
});
//当点击跳转链接后,回到页面顶部位置
$("#backtop").click(function(){
//$('body,html').animate({scrollTop:0},1000);
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, 1000);
return false;
}
$('body').animate({ scrollTop: 0 }, 1000);
return false;
});
});
});
CSS
#backtop{position:fixed;right:7.5%;bottom:-100px;z-index:2;overflow:auto;width:54px;height:54px;border-top-right-radius:50px;border-top-left-radius:50px;background-image:url(btt.png);background-position:0 0;cursor:pointer;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out}
HTML
<div id="backtop" title="返回顶部" style="bottom: -100px;"></div>
效果图