上篇文章说道给小站加个返回顶部的按钮，很简单很实用很友好。一句html插入代码、一句CSS美化代码、一句jQuery滑动代码，轻松搞定！这篇文章接着来说，相关代码上篇文章也已补充，今儿就主要来说说代码的含义。

既然用了，顺便了解学习下它的含义，那是不学白不学的事儿呀！先看效果图，最好是亲自点击体验：

huadong.jpg

图中左手边三个图标，功能分别是滑动到顶部、到评论、到底部。具体代码：

 
<div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>
 
// 一个div标签包裹着三个空div标签而已，只为插入显示内容，可放header.php内
 
#shangxia{position:fixed;top:40%;left:50%;margin-left:-520px;display:block;}
 
/* 使用fixed使id=“shangxia”的对象固定于浏览器中，相对的上距离为40%，左距离为50%（即居中），然后向左移动520px（需自行调整！！！） */
 
#shang{background:url(images/shang.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
 
#xia{background:url(images/xia.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
 
#comt{background:url(images/comt.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
 
$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 
 
//点击id="shang"对象时，滑动至相对浏览器滚动条为0px（即顶部），时间为800毫秒
 
$('#comt').click(function(){$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);});
 
//点击id="comt"对象时，滑动至id="comment"相对浏览器滚动条的距离，时间为800毫秒
 
$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});

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

目前我放了3个图标都是滑动的，我也在考虑多弄几个图标用来其他功能，暂时还在思考中……

2010-08-01更新：PHP判断代码，首页只显示上下图标，其他有评论图标

 
<?php if (is_home()) { ?>
 
<div id="shangxia"><div id="shang"></div><div id="xia"></div></div>
 
<?php } else { ?>
 
<div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>
 
<?php } ?>