一个简单回到顶部效果-超过高度显示侧边返回顶部按钮
代码如下：
p#top{ position:fixed;display:none;bottom:100px;right:80px;}
p#top a{text-align:center;text-decoration:none;color:#d1d1d1;display:block;width:64px;transition:color 1s;}
p#top a:hover{ color:#979797; }
p#top a span{background:url(top.png) no-repeat center;border-radius:6px;display:block;height:64px;transition:background 1s;}
#top a:hover span{background:url(top.png) no-repeat center;}
$(document).ready(function(e) {
//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){ //大于100行才出现跳转箭头
$(“#top”).fadeIn(1500); //大于1500行时跳转箭头慢慢透明显示
}
else
{
$(“#top”).fadeOut(1500); //大于1500行时跳转箭头慢慢透明消失
}
});
//当点击跳转链接后，回到页面顶部位置
$(“#top”).click(function(){
$(‘body,html’).animate({scrollTop:0},1000);//1s完成回到顶部
return false;
});
});
});
返回顶部
