给wordpress博客添加回到顶部和写评论的悬浮按钮

  • A+
所属分类:建站日志
摘要

关于添加这个悬浮按钮,网上有许多种代码,不过特效都不怎么相同。最后还是觉得卢松松博客里的效果看起来最为满意。于是通过谷歌浏览器的开发者工具将这个实现的方法给套了出来。这个用起来也是非常简单的。步骤如下:

关于添加这个悬浮按钮,网上有许多种代码,不过特效都不怎么相同。最后还是觉得卢松松博客里的效果看起来最为满意。于是通过谷歌浏览器的开发者工具将这个实现的方法给套了出来。这个用起来也是非常简单的。步骤如下:

第一步、新建一个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;
	}
}

第二步、在主题文件single.php文件的最后面添加这个

<!--回顶部--> 
<script src="<?php bloginfo('template_url'); ?>/js/top.js"></script>

第三步、将以下两个图片放入images文件夹
btn_comment
btn_top

ok!所有步骤已经完成了!

不过我们还得根据自己的主题稍微调节一下。第一步的js中有相应的css代码,可以调节悬浮按钮的位置。还有引用图片的地址可以换成自己的。要是想在留言板里也显示这样的悬浮按钮,可以把第二步的引用代码同时加到留言板的模板文件里,如果你有自定义的留言板模板的话(许多主题用的都是默认的模板,我因为上次添加读者墙功能,而弄过这样的独立模板)。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:13   其中:访客  6   博主  4   引用   3

    • 薅羊毛(www.haoyangmao8.com) 薅羊毛(www.haoyangmao8.com) 0

      ZBLOG怎么办

      • 辛好 辛好 3

        非常感谢,很实用

        • ViC ViC 3

          你好,我这个有点问题就是写评论它指向的链接是comment,但是我本来的链接应该是respond,这个怎么修改

          • 呵呵咖 呵呵咖 0

            谢谢分享!这个还是满好用的!

            • 无价值 无价值 0

              博主你好,根据博主的分享已经实现了,万分感谢,不过因为模板的问题,看着不太和谐。博主可否看一下,能否有解决的办法?

              • 梦轩丽人 梦轩丽人 1

                非常感谢分享,已经根据博主分享的步骤实现了,谢谢!

              • 来自外部的引用: 3

                • WordPress实现返回顶部和写评论的悬浮按钮 | 梦轩丽人个人网站
                • WordPress实现返回顶部和写评论的悬浮按钮 | boke123网址大全
                • WordPress实现返回顶部和写评论的悬浮按钮 | 懿古今