WordPress 博客添加返回顶部按钮教程

有很多网友反映软矿博客没有返回顶部按钮，这对阅读比较长的页面时需要返回顶部比较麻烦，用户体验非常不好。为了改善用户体验，笔者也决定在WordPress增加返回顶部按钮，参考百度搜索风云榜的返回顶部的代码，笔者写个简单的教程，方便有这方面需要的博主。

 其实非常简单，只要在WordPress主题的footer.php添加一段代码即可。
Step 1 - 进入WordPress 控制面板-“外观”-“编辑”，找到footer.php，在</div>和</body>之前添加以下代码：

 <div id=”full” style=”width:50px; height:95px; position:fixed; left:50%; top:425px; margin-left:493px;  z-index:100; text-align:center; cursor:pointer;”> <a><img src=”http://www.x-berry.com/wordpress/wp-content/uploads/2012/05/back.png” border=0 alt=”返回顶部”></a> </div>
<script type=”text/javascript”>var isie6 = window.XMLHttpRequest ? false : true; function newtoponload() { var c = document.getElementById(“full”); function b() { var a = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if (a > 0) { if (isie6) { c.style.display = “none”; clearTimeout(window.show); window.show = setTimeout(function () { var d = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if (d > 0) { c.style.display = “block”; c.style.top = (400 + d) + “px” } }, 300) } else { c.style.display = “block” } } else { c.style.display = “none” } } if (isie6) { c.style.position = “absolute” } window.onscroll = b; b() } if (window.attachEvent) { window.attachEvent(“onload”, newtoponload) } else { window.addEventListener(“load”, newtoponload, false) } document.getElementById(“full”).onclick = function () { window.scrollTo(0, 0) };</script>

 Step 2 - 将红色部分替换成你的返回顶部按钮图片链接，这样的图片在网上很容易找到，笔者认为越简单越好。
Step 3 - 如果发现返回按钮的样式跟自己的博客不太协调，可以尝试修改步骤一中代码的style的值。
以下是软矿博客添加的返回顶部按钮后的效果，返回按钮会随着页面下滑而下滑，读者可以点击返回按钮轻松回到网页顶部。如下图：

订阅本站：http://feed.x-berry.com/
本文链接：http://www.x-berry.com/wordpress-return-back-code
本站文章除注明转载外，均为本站原创编译。转载请注明本文链接！

相关日志

• 2011/01/29 — WordPress博客教程（十）：博客赚钱 (20)
• 2010/12/27 — WordPress博客教程（九）：添加新文章 (11)
• 2010/12/12 — WordPress博客教程（七）：WordPress插件 (10)
• 2010/12/10 — WordPress博客教程（六）：必需的静态页面 (6)
• 2010/12/08 — WordPress博客教程（五）：WordPress主题设置 (2)
• 2010/12/06 — WordPress博客教程（四）：WordPress主题安装 (2)
• 2010/12/03 — WordPress博客教程（三）：WordPress安装 (5)
• 2010/11/30 — WordPress博客教程（二）：主机选择 (12)