利用jQuery加了个“返回顶部”滑动效果

admin

1. <div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>
   
2. // 一个div标签包裹着三个空div标签而已，只为插入显示内容，可放header.php内

复制代码

1. #shangxia{position:fixed;top:40%;left:50%;margin-left:-520px;display:block;}
   
2. /* 使用fixed使id=“shangxia”的对象固定于浏览器中，相对的上距离为40%，左距离为50%（即居中），然后向左移动520px（需自行调整！！！） */
   
3. #shang{background:url(images/shang.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
   
4. #xia{background:url(images/xia.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
   
5. #comt{background:url(images/comt.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}

复制代码

1. $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
   
2. //点击id="shang"对象时，滑动至相对浏览器滚动条为0px（即顶部），时间为800毫秒
   
3. $('#comt').click(function(){$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);});
   
4. //点击id="comt"对象时，滑动至id="comment"相对浏览器滚动条的距离，时间为800毫秒
   
5. $('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});

复制代码

提示：注意各id（#）或者class(.)之间对应的关系，css中margin-left:-520px;请自行调试！

原文：http://immmmm.com/added-sliding-effect-enhanced.html