隐藏html5回到顶部,用jQuery实现的智能隐藏、滑动效果的返回顶部代码

在线DEMO：传送门

HTML代码(放在页面任意位置，并用CSS美化)：

回到顶部

JS代码：

$(document).ready(function() {

//首先将#back-to-top隐藏

$("#back-to-top").hide();

//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失

$(function() {

$(window).scroll(function() {

if ($(window).scrollTop() > 100) {

$("#back-to-top").fadeIn(1500);

} else {

$("#back-to-top").fadeOut(1500);

}

});

//当点击跳转链接后，回到页面顶部位置

$("#back-to-top").click(function() {

$('body,html').animate({

scrollTop: 0

},

1000);

return false;

});

});

});

下面再来一个简单点的返回顶部的代码：

完整代码：

基于jquery的返回顶部效果

#goTop{position:absolute;display:none;width:50px;height:48px;background:#fff url(//img.jbzj.com/file_images/article/201601/gotop.png) no-repeat 16px 15px;border:solid 1px #f9f9f8;border-radius:6px;box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);cursor:pointer}

#goTop:hover{height:50px;background-position:16px 16px;box-shadow:0 1px 1px rgba(0, 0, 0, 0.3)}

想看到效果就需要拖动滚动条到下面，靠右下角的位置就可以看到

$(window).scroll(function(){

var sc=$(window).scrollTop();

var rwidth=$(window).width()+$(document).scrollLeft();

var rheight=$(window).height()+$(document).scrollTop();

if(sc>0){

$("#goTop").css("display","block");

$("#goTop").css("left",(rwidth-80)+"px");

$("#goTop").css("top",(rheight-120)+"px");

}else{

$("#goTop").css("display","none");

}

});

$("#goTop").click(function(){

$('body,html').animate({scrollTop:0},300);

});