</div
很多博客都已经有这种按钮了，一般都是返回顶部、写评论和直达底部三个按钮，不过我还是比较喜欢卢松松博客的那个返回顶部和写评论的按钮效果。刚好搜索到博主枫之羁绊分享的《给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 ><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>>”
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;
}
}
</div
2、在主题的single.php和page.php文件的最后面添加下面的代码。
<script src=“<?php bloginfo(‘template_url’); ?>/js/top.js”></script>
</div
3、将以下两个图片放入主题的images文件夹。
![]()
![]()
4、调整top.js文件内的CSS，让悬浮按钮出现在你想要的位置。一般只需要调整top:460px;margin-left:213px;这两个数字就行了。图片地址也换成自己的，当然这些按钮的图片也可以自己设计的，到时候直接更新图片地址就行了。
PS：如果第一步中的JS文件名字改变了，第二步中引用的JS文件名也要跟着改变；
经本人测试使用，回顶部按钮是有效的，但是写评论却无效。后来我查看自己页面的源文件，发现评论框附近有<aname=”comments”></a>，而top.js文件写评论的链接却是回到href=’#comment’，所以需要把top.js文件中的href=’#comment’修改为href=’#comments’才行。我不知道是特例还是什么，大家如果发现点击按钮没有反应，就通过查看源代码检查一下。
文章代码来源于：枫先生《给wordpress博客添加回到顶部和写评论的悬浮按钮》
你可能感兴趣的文章
- 如何修改word的默认字体大小以便于写文章
- 美图秀秀的自定义饰品保存在哪里？怎么取出来？
- 如何输出自定义类型文章的所有分类和所有标签？
- Nana主题如何实现自动加载功能仅在移动端有效？
- ECS服务器实现本地七天循环备份数据库和网站文件
- WordPress新手入门教程之友链管理篇
- WordPress新手入门教程之主题修改篇
- 上海云盾（YUNDUN）云加速CNAME接入设置教程
