0

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

WordPress:关注微信公众号获取验证码

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

添加步骤,打开博客的后台管理,依次进入“外观”,“编辑”,打开“footer.php”,在</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="https://defcon.cn/wp-content/uploads/2020/12/top.png" border=0 width="48px" width="48px" 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>
   
微信 支付宝    

如果文章对您有帮助,欢迎打赏作者!

欢迎评论