返回顶部的功能在博客中来说应该算是比较实用的,特别是针对那些单栏主题的使用者来说更是必不可少。半夏在网上搜集了很多 WordPress 返回顶部的实现方法,下面就给出一种最简单的无插件实现 WordPress 返回顶部方法,如下:
将如下代码加入到 footer.php 中:
<div id=”full” style=”width: 尺寸 px; height: 尺寸 px; position:fixed; top:700px; left:50%;margin-left:620px; z-index:700; text-align:center; cursor:pointer;”>
<a><img src=” 返回顶部图片地址” border=0 alt=” 返回顶部”></a></div>
<script src=” 返回顶部 JS 地址” type=”text/javascript”></script>
上面的代码中需要你自己准备返回顶部的图片,根据你的返回顶部图片更改宽度和高度的尺寸,然后将以下 JS 代码保存至自己的服务器后,将保存的 JS 代码地址填入上面的返回顶部 JS 地址处即可,下面是返回顶部的 JS 文件内容:
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) };
以上,完成后,刷新你的博客,Wordpress 返回顶部图标是不是已经出来呢?
当然,如果你不喜欢自己折腾,嫌这样比较麻烦,你也可以通过安装类似 Dynamic To Top 或者 wp auto top 和 Go To Top 这样的 WordPress 返回顶部插件来实现 WordPress 返回顶部功能,根据自己的喜好,二者皆可。