WordPress博客添加“返回顶部”按钮

新浪微博 QQ空间 腾讯微博

“返回顶部”在网页页面上非常实用。一般主题都没有自带该按钮。可以自己DIY一个。

添加步骤,打开博客的后台管理,依次进入“外观”,“编辑”,打开“footer.php”,在最后一个</div>与</body>之间添加如下代码,注意替换图片地址(斜体部分)以匹配特定主题。

<div id="full" style="width:88px; height:88px; position:fixed; right:0px; 
    bottom:0px; margin-left:0px; margin-bottom:0px; z-index:100; text-align:center; cursor:pointer;">
  <a>
    <img src="http://shentar.qiniudn.com/wp-content/themes/thematic/gallery/totop2.png"
    border=0 width="55px" width="55px" 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>

 

本站效果截图:

未命名23

新浪微博 QQ空间 腾讯微博

| 1 分2 分3 分4 分5 分 (5.00- 4票)
Loading ... Loading ... | 这篇文章归档在:建站技术, 移动互联, 软件技术
| 标签: , , . | 永久链接:链接 | 评论(6) |

6 条评论

  1. 评论于 八月 29, 2014 at 20:00:29 CST | 评论链接

    很实用! 学习了。

  2. 评论于 三月 14, 2014 at 15:36:54 CST | 评论链接

    您的博客不错,博客嘛,个人网站,当然可以做得很专业,也可以做得很休闲!

  3. Gun
    评论于 一月 18, 2014 at 12:05:22 CST | 评论链接

    还有,鼠标放上去会显示“回到顶部”的提示字样可能会更完美呢

    • 童燕群
      评论于 一月 18, 2014 at 12:59:22 CST | 评论链接

      我在new iPad上面试过,可以用的啊。

  4. Gun
    评论于 一月 18, 2014 at 11:59:45 CST | 评论链接

    很实用很简洁,但是在ipad上或者平板上访问,因为屏幕大小的关系,就看不到这个按钮了。

  5. 评论于 九月 19, 2013 at 14:58:43 CST | 评论链接

    呃 好简单的一个按钮…..

评论

邮箱地址不会被泄露, 标记为 * 的项目必填。

8 - 2 = *



You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <img alt="" src="" class=""> <pre class=""> <q cite=""> <s> <strike> <strong>

返回顶部