为WordPress添加“返回顶部”的导航按钮

细心的朋友应该会看到在本站的首页文章列表（内页的文章主体）和侧边栏之间的夹缝中有三个按钮，分别代表向上到顶部、定位到评论部分、向下到页底，给读者提供了一定的便利，对优化用户体验是很好的。今天优化了已下，就是在首页隐藏评论按钮，因为首页没有评论，无法定位，显示也是多余的，所以加上判断语句，在首页就只显示上下两个箭头了。恰好朋友问起是如何实现这个个性化功能的，于是写篇文章总结一下，以供朋友们查阅。

其实很简单，基本上只需三步：

1.在头文件中加入按钮元素

在头部文件header.php中加入如下代码：
[sourcecode language='php']

[/sourcecode]
简单释义：shangxia的div标签中包含三个div标签：shang（向上）、comt（评论）、xia（向下），判断语句的作用是当在首页时只显示shang和xia两个标签（具体显示效果参见本站）

2.在主题css中加入以上标签的定位和样式

在主题的style.css文件中加入已下代码：
[sourcecode language='php']
#shangxia{position:fixed;top:40%;left:50%;margin-left:-520px;display:block;}
#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;}
[/sourcecode]
简单释义：第一行中定位了按钮出现的位置，大家可以参考自己的博客主题做相应微调；后三行中设定了三个按钮的样式，请大家自己搜集素材，别忘了上传到服务器相应位置。

3.在js文件中添加jQuery滑动效果

在主题的js文件（一般在js文件内，扩展名师.js的文件，可以查看头文件中是否调用了这个js文件）打开加入已下代码：
[sourcecode language='php']
$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
$('#comt').click(function(){$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);});
$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});
[/sourcecode]

至此全部完成！祝你好运，遇到问题可以在本文留言。