劉連康:如何給WordPress博客添加“返回頂部”按鈕

劉連康 2016年8月11日08:22:27網站建設36,34521327字閱讀4分25秒閱讀模式

“返回頂部”這個按鈕在網站上非常實用,但是wordpress自帶的主題里都沒有這個按鈕,我們可以自己制作一個。

 

方法很簡單,打開博客的后臺管理,依次進入“外觀”,“編輯”,打開“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://www.webseriesmag.com/wp-content/themes/twentyeleven/images/totop2.png"
border=0 width="19px" width="19px" 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>

 

本文為原創文章,版權歸作者所有,未經授權,禁止抄襲,否則將追究法律責任!

歡迎轉載,轉載請注明作者和出處,謝謝!

作者:劉連康

  • 我的微信
  • 這是我的微信掃一掃
  • weinxin
  • 我的微信公眾號
  • 我的微信公眾號掃一掃
  • weinxin
劉連康
  • 本文由 發表于 2016年8月11日08:22:27
評論:3   其中:訪客  2   博主  1
    • 天津網站建設
      天津網站建設 0

      感謝分享

      • mrz
        mrz 0

        為什么添加后,更新文件很慢啊,半天沒反應

          • 劉連康
            劉連康

            @ mrz 更新文件很慢有很多原因,建議你檢查一下網站是不是安裝了很多插件,或者是圖片是不是都很大。

        匿名

        發表評論

        匿名網友 填寫信息

        :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

        確定