返回頂部的功能在博客中來説應該算是比較實用的,特別是針對那些單欄主題的使用者來説更是必不可少。半夏在網上搜集了很多 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 &gt; 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 &gt; 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 返回頂部功能,根據自己的喜好,二者皆可。