当Wordpress网页显示的内容增多时，如果继续使用鼠标滚动来返回顶部导航的话将会是件很麻烦的事情。很多时候我们需要滚好几下才能到达顶部。于是像QQ空间、Discuz论坛等都出现了返回顶部的按钮。这些按钮的实现方式也不尽相同。直接使用html实现是件很简单的事情。但是效果不够优美（点击完会马上跳到顶部）。所以博主找了一种用js实现的比较好的方法。
Step1
下载js文件并上传至主题目录下。点击下载
Step2
编辑主题中的foot.php文件。在底部添加：
<script src=”<?php bloginfo(‘stylesheet_directory’); ?>/gototop.js” type=”text/javascript” charset=”utf-8″></script>
<div id=”scroll”><a href=”javascript:void(0)” onclick=”goto_top()” title=”返回顶部”>TOP</a></div>
注：可将<?php bloginfo(‘stylesheet_directory’); ?>/gototop.js 改为gototop.js的绝对地址。
Step3
打开主题样式表，复制下列代码插入。保存。
/*返回顶部*/
#scroll {display:block; width:30px; margin-right:-520px;
position:fixed;
right:50%;
top:90%;
_margin-right:-507px;
_position:absolute;
_margin-top:30px;
_top:expression(eval(document.documentElement.scrollTop));
}
#scroll a {
display:block;
float:right;
padding:9px 5px;
cursor: pointer;
background-color:#444;
color:#fff;
border-radius:5px;
text-decoration: none;
font-weight:bold;
}
#scroll a:hover {
background-color:#333;
color:#669900;
text-decoration: none;
font-weight:bold;
}
搞定！！！参考样式：http://www.wildhorde.com
提示：适当修改CSS样式即可拥有你喜欢的返回顶部按钮。圆角不支持IE9以下的IE浏览器。
发表回复