WordPress主题添加一个滚屏按钮（一键到达顶部底部） – WordPress 教程

似乎很多人都喜欢弄一个固定的滚屏按钮，这个小功能可以方便读者阅读。

其实我们使用的操作系统早已提供了这一功能，那就鼠标中键（滚轮），使用起来远比这个按钮方便，不过鼠标中键貌似都不是很抗用，另外，也为点缀一下博客，弄个固定的滚屏按钮也不错。

今天提供的滚屏代码与HotNews pro主题集成的滚屏按钮类似，只不过是固定在屏幕的边缘并具有鼠标悬停效果，下面以WordPress默认主题Twenty Ten为例，开始折腾。

打开Twenty Ten主题的header.php模版文件，把以下代码

<div id="scroll"><a class="scroll_t" title="Top" href="#header"></a><?php if(is_single() || is_page()) { ?><a class="scroll_c" title="Comments" href="#comments"></a><?php } ?><a class="scroll_b" title="Bottom" href="#footer"></a></div>

添加到这句后面

<div id="wrapper"class="hfeed">

也可添加到footer.php中。

再把下面的样式添加到style.css的最后面：

/** 滚屏 **/#scroll {position:fixed;top:40%;right:0;width:24px;_position:absolute;_top:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight * 0.4));}#scroll a {display:block;float:right;width:24px;height:24px;background:#fffurl(images/scroll.gif) no-repeat;}#scroll a:hover {background:#fffurl(images/scroll.gif) no-repeat;}#scroll a.scroll_t:hover {background-position:-24px 0;}#scroll a.scroll_c {background-position:0 -24px;}#scroll a.scroll_c:hover {background-position:-24px -24px;}#scroll a.scroll_b {background-position:0 -48px;}#scroll a.scroll_b:hover {background-position:-24px -48px;}html body {background-image:url(about:blank);background-attachment:fixed;}/** 防止IE6抖动 **/

最后把下面的图片扔到主题的images文件夹中，刷新页面试试按钮效果。

可能你会发现滚屏有些生硬，对了还缺少JS滑动特效。

下载：jquery.min.js，放到Twenty Ten主题根目录中，并在header.php模版：

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

下面添加：

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/jquery.min.js" ></script><script type="text/javascript">jQuery(document).ready(function($){$('.scroll_t').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});$('.scroll_c').click(function(){$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);});$('.scroll_b').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});});</script>

注：如果你的主题已加载了jquery.js，就不用重复加载jquery.min.js了。

最后，再刷新一下页面，这回效果应该出来了。

注：如果你的主题标签选择器不是#header、#comments和#footer可以对上面代码作相应的修改。

经常看见有的网友也弄了个滚屏按钮，大大的回旋箭头，JS特效晃晃悠悠，严重干扰阅读者的视线。

顺便再给大家提供一个双击滚屏代码：

<script type="text/javascript">var currentpos,timer;function initialize(){timer=setInterval("scrollwindow()",10);}function sc(){clearInterval(timer);}function scrollwindow(){window.scrollBy(0,1);}document.onmousedown=scdocument.ondblclick=initialize</script>

这段JS代码，可实现双击鼠标自动滚屏，单击停止，效果可以在此页面试试。