為WordPress添加一個返回頂部按鈕

為WordPress添加一個“返回頂部”按鈕,能非常方便快速的返回網頁頂部,有助于提高網頁用戶的瀏覽體驗。下面介紹的方法非常簡單實用,不僅適用于WordPress,也適用于其它任何網頁。

首先把以下代碼添加到WordPress主題的footer.php

<div id="backtop" style="width:20px;position:fixed;left:50%;bottom:10px;margin-left:493px;z-index:100;text-align:center;cursor:pointer;display:none;line-height:16px;">
<a>返回頂部</a>
</div>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/backtop.js"></script>

然后把以下代碼保存為backtop.js,放到WordPress主題的js文件夾

?var isie6 = window.XMLHttpRequest ? false : true; function newtoponload() { var c = document.getElementById("backtop"); 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("backtop").onclick = function () { window.scrollTo(0, 0) };

至此,當網頁向下滾動一些時,在網頁右下方就會出現一個“返回頂部”按鈕。另外也可通過CSS對按鈕外觀進行個性化設置。

 
  • 本文由 米粒在線 發表于 2014年7月8日19:39:41
  • 轉載請務必保留本文鏈接:http://m.bjmhhq.com/25566.html
評論  2  訪客  2
    • xy 0

      博主這個Top/Bottom 比較好!

    發表評論

    匿名網友
    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
    確定

    拖動滑塊以完成驗證