之前我是使用 WordPress 插件来实现 「返回顶部」 功能，我之前使用 Dynamic To Top，当然我们也可以手动添加代码来实现这个功能。
本文介绍的 「返回顶部」 代码很简单和简洁，不使用外部 jQuery，兼容 Chrome 浏览器。代码参照 「在 WordPress 中添加返回顶部的功能」 这篇文章，根据我自己的博客风格做了很小的改动。
1、在 style.css 文件中添加如下代码：
/* GoTop Start */
#gotop{
width:38px;
height:36px;
position:fixed;
bottom:70px;
right:20px;
top:auto;
display:block;
cursor:pointer;
background: url(lib/top.gif) no-repeat
}
*html #gotop{
position:absolute;
bottom:auto; top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
/* GoTop End */
2、在 footer.php 文件的</body> 语句前添加如下代码：
<!-- 返回顶部 -->
<div style="display: none;" id="gotop"></div>
<script type='text/javascript'>
backTop=function (btnId){
var btn=document.getElementById(btnId);
var d=document.documentElement;
var b=document.body;
window.onscroll=set;
btn.onclick=function (){
btn.style.display="none";
window.onscroll=null;
this.timer=setInterval(function(){
d.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
b.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
if((d.scrollTop+b.scrollTop)==0) clearInterval(btn.timer,window.onscroll=set);
},10);
};
function set(){btn.style.display=(d.scrollTop+b.scrollTop>300)?'block':"none"}
};
backTop('gotop');
</script>
<!-- 返回顶部 END -->
说明：
- 这里是图片版，文字版我还没有去研究。style.css 代码 background 属性即是背景图片地址，我这里把图片放在主题目录下的 lib 目录中。
- scrollTop>300 指从顶部向下滚动 300 像素后出现 「返回顶部」 的按钮。
-
d.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);b.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1); 这里的两个 0.1 共同控制向上的滚动速度。目前我的网站均设为 0.05。为什么是两个我理解不了，但可以看参考链接。
- 背景图片可以在网上搜索或自己制作，或者参考链接文章中的图片。这个图片很简洁，个人比较喜欢，所以我直接拿来用在我的博客中了。（图片地址）
以上代码在 Safari 中貌似无效，其他浏览器中均正常。
参考链接：
请问 chrome 浏览器不管用，但 IE 没问题可能是什么原因呢
这个。。。超出我的知识范围了，我也不晓得
代码本身我不懂，只晓得几个参数，可能这个代码的兼容性没那么好
建议你：
1、搜索一下相关代码的用法，然后尝试修改一下看能不能解决
2、或者换用插件而不是自己添加代码，一般插件兼容性好一些
请问您这个代码可以控制滚动速度吗？谢谢！
可以的，下面两行代码最后的 0.1 就是控制速度的值，越小越慢
d.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
b.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
感谢您的回复！我添加了代码后使用正常，但是在 W3C CSS 校验器中检查了一下 style.css，提示我这个：
语法错误 *html #gotop{ position:absolute; bottom:auto; top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); }
不过可以正常使用，不知道是怎么回事……
这个问题我回答不了，你可以谷歌一下嘛
不过管他呢，能用就 OK 了，毕竟我们的博客网站只是小型的个人网站而已
没有 GOOGLE 出来，貌似 CSS 里的那段写法还挺复杂的，不怎么常见……不过还是谢谢你的回复！说的也是，能用就行了。
很爱钻研的同学，赞一个。我是单独做了一个文章列表页，然后将 sidebar 固定住，一来相当于做了个 sitemap，二来就无须回到顶部了。
你这做法也不错，更简洁明了，不过不适合技术站点，需要来回看上看下的。文章列表我用了插件，按类别和日期、tag 都有。
文章列表你都用插件？你现在一共用了多少插件啊？我用了 6 个
6 个够少的啊，我都将近 30 个，该精简精简下了