WordPress返回顶部、查看评论、转到底部代码
很多时候一个网页上的内容一次显示不完，除了分页解决外，就需要借助滚动条实现滑动。不管基于什么需求，用户总有时候想直接查看评论、转到底部、返回顶部。
那么作为设计者，我们要事先设计好一个快捷工具。通过插件当然可以事先很多很炫的功能，但是抱着对插件“宁少勿多，宁省不用”的基本原则，本次我们说一下如何通过添加代码实现该功能。
首先看看我的博客设计的这个：
网页php代码
< ?php if ( is_singular() ){ ?> < ?php } ?>
js代码：
jQuery(document).ready(function($) {
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ?
$("html") : $("body")) : $("html,body");
$("#roll_up").mouseover(function() {
up()
}).mouseout(function() {
clearTimeout(fq)
}).click(function() {
$body.animate({
scrollTop: 0
},
400)
});
$("#roll_down").mouseover(function() {
dn()
}).mouseout(function() {
clearTimeout(fq)
}).click(function() {
$body.animate({
scrollTop: $(document).height()
},
400)
});
$("#roll_comment").click(function() {
$body.animate({
scrollTop: $("#comment").offset().top
},
400)
});
});
function up() {
$wd = $(window);
$wd.scrollTop($wd.scrollTop() - 1);
fq = setTimeout("up()", 50)
};
function dn() {
$wd = $(window);
$wd.scrollTop($wd.scrollTop() + 1);
fq = setTimeout("dn()", 50)
};
css样式代码：
#roll{position:fixed; top:40%;left:50%;display:block;
margin-left:190px;z-index:999;width: 15px;height: 240px;_display:none;}
#roll_up,#roll_comment,#roll_down{position:relative;cursor:pointer;height:100px;width:15px;}
#roll_up{background:url(images/roll.png) no-repeat;}
#roll_comment{background:url(images/roll.png) no-repeat 0 -100px;height: 40px;}
#roll_down{background:url(images/roll.png) no-repeat 0 -140px;}
上面的css相关代码有些需要修改的，如果没有css基础可以找我帮忙。
js文件需要自己新建一个文件，调用的方式也已经在上面说明了。
在主题footer.php文件中将网页php代码写入。
如果发现查看点击评论框失效，原因可能是你的主题的评论框的的id不是“comment”，需要修改js代码。
下面是相关附件的下载地址：
http://pan.baidu.com/s/1i3DrUDJ
下面js代码的最新改进版：
WordPress返回顶部js代码改进版
MySql AUTO_INCREMENT 重新设置自增值的方法 WP-Syntax代码高亮插件使用方法
[…] WordPress返回顶部、查看评论、转到底部代码 […]