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=”https://www.mkswp.com/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的值。

以下是软矿博客添加的返回顶部按钮后的效果,返回按钮会随着页面下滑而下滑,读者可以点击返回按钮轻松回到网页顶部。如下图:

 

标签

发表评论

评论已关闭。

评论列表(15)

  • 无名

    2015.2.24 12:02

    博主,文章里面和之前应该是“之间”,另外你的代码排版一点也不好看。乱。

    • MK

      2015.2.24 19:02

      To 无名:代码排版??

  • saintsky

    2013.4.24 20:04

    这个方法也不错

  • 厦门SEO

    2013.2.1 17:02

    我看见楼上那姐们你太有才了。她说按下home就回到顶部了。

  • 平民时尚

    2012.6.22 08:06

    wordpress的插件真多,使用的人也很多,很羡慕能通过写程序修改wordpress的人。见过一个能跟随下拉屏幕移动的返回顶部,感觉很不错,不知道是什么插件。博主的这个办法收藏了,有朝一日能写程序的时候用用。

  • Win8迷

    2012.5.26 22:05

    这个很简单的说

  • 新疆SEO

    2012.5.26 22:05

    加上代码不显示啊,软矿

  • 成都楼盘

    2012.5.25 14:05

    能不能实现正常情况下是消失,往下拉才出现那个返回顶部的按钮啊

  • 达岸之邦

    2012.5.22 21:05

    简单实用

  • danus

    2012.5.22 21:05

    笔记本,想按home的话,得按fn,麻烦啊

  • 杜罗华

    2012.5.21 17:05

    按一下home键不就回到顶部了么

    • MK

      2012.5.21 22:05

      To 杜罗华:使用键盘的确可以很容易实现。。

  • 没有如果

    2012.5.21 09:05

    14寸笔记本屏幕,分辨率1024*768。因宽度的原因,右下角显示不出绿色的按钮。但把指针移到相应的位置,可变成小手状,功能正常。

    http://i.imgbox.com/aanAiRF7.jpg

  • 一堵墙

    2012.5.21 08:05

    自适应版面对于这个固定的就用不了了吧

  • Mr.李

    2012.5.21 07:05

    。。。。这也可以,感觉不协调呢!!