WordPress实现返回顶部和写评论的悬浮按钮

前几天有一位来访本站的读者百家网络博客给我留言说“博客缺乏个返回顶部的有点不习惯~”，所以就决定为博客也弄一个返回顶部和写评论的悬浮按钮。

很多博客都已经有这种按钮了，一般都是返回顶部、写评论和直达底部三个按钮，不过我还是比较喜欢卢松松博客的那个返回顶部和写评论的按钮效果。刚好搜索到博主枫之羁绊分享的《给 wordpress 博客添加回到顶部和写评论的悬浮按钮》就是卢松松博客的那个按钮效果，所以就直接应用上了。

详细操作步骤如下：

1、新建一个 JS 文件名称为 top.js，将以下代码粘贴进去，然后放入主题文件的 js 文件夹里。

//回顶部+写评论
lastScrollY=0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{/*Netscape stuff*/}
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("full").style.top=parseInt(document.getElementById("full").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
if(diffY > 200){document.getElementById("full").style.display = "block"}
else{
document.getElementById("full").style.display = "none"}
}
suspendcode="<div id=\"full\" style='display:none; width:15px; height:57px; POSITION:absolute; left:50%; top:460px; margin-left:213px; z-index:100; text-align:center;'><a href='#'><img src='http://www.fengmr.com/wp-content/themes/fengmr/images/btn_top.gif' /></a><br><br><a href='#comment'><img src='http://www.fengmr.com/wp-content/themes/fengmr/images/btn_comment.gif' /></a></div>"
document.write(suspendcode);
window.setInterval("heartBeat()",1);
function switchImage(imageId, imageUrl, linkId, linkUrl, preview, title, alt) {
if(imageId && imageUrl) {
var image = $(imageId);
image.src = imageUrl;
if(title) {
image.title = title;
}
if(alt) {
image.alt = alt;
}
}
if(linkId && linkUrl) {
var link = $(linkId);
link.href = linkUrl;
}
}

2、在主题的 single.php 和 page.php 文件的最后面添加下面的代码。

<script src="<?php%20bloginfo('template_url');%20?>/js/top.js"></script>

3、将以下两个图片放入主题的 images 文件夹。

4、调整 top.js 文件内的 CSS，让悬浮按钮出现在你想要的位置。一般只需要调整 top:460px; margin-left:213px;这两个数字就行了。图片地址也换成自己的，当然这些按钮的图片也可以自己设计的，到时候直接更新图片地址就行了。