回到頁首頂端按鈕

現在網頁在設計時為了提升使用者體驗，漸漸大家都會加入回到頂端按鈕，讓滑到下方的文章可以很快地回到最上方操作其他的動作，
部分的 WordPress 佈景主題並不支援這項功能，現在就讓我來告訴大家，如何將這個功能嵌入 WordPress。

讓捲軸回到頁面最頂點寫法

第1款、固定式 回頁首圖片按鈕，最輕量級，固定置放在右下角各1em 距離的地方

<img id='BackTop' style=" cursor: pointer; position:fixed; right: 1em; bottom: 1em; z-index:200;
 src='https://pic.pimg.tw/e717/1609329044-1407343881-g.png' title='回頁首' onclick="window.scroll({ top: 0, left: 0, behavior: 'smooth' });"/>

 第2款、 隱藏再 淡入淡出  的回頁首程式碼，多加一點 style、JavaScript。

<img id='BackTop' style=" cursor: pointer; position:fixed; right: 1em; bottom: 1em; z-index:200; opacity: 0; transition:  .7s ease-in; display:none;"
  src='https://pic.pimg.tw/e717/1609329044-1407343881-g.png' title='回頁首'  onclick="window.scroll({ top: 0, left: 0, behavior: 'smooth' });"/>

<script>

let doc= document;
let _top = doc.getElementById("BackTop").style;
window.onscroll = function () {
  if (doc.body.scrollTop > 300 || doc.documentElement.scrollTop > 300) {
    _top.display = "block";
    _top.opacity = "1";
  } else {
     _top.opacity = "0";
      let x = setInterval('_top.display = "none" ',1500);
    clearInterval(x);
   }
}
</script>

點按下面文字方塊，複製程式碼

<img id='BackTop' style=" cursor: pointer; position:fixed; right: 1em; bottom: 1em; z-index:200; opacity: 0; transition: .7s ease-in; display:none;" src='https://pic.pimg.tw/e717/1609329044-1407343881-g.png' title='回頁首' onclick="window.scroll({ top: 0, left: 0, behavior: 'smooth' });"/> <script> let doc= document; let _top = doc.getElementById("BackTop").style; window.onscroll = function () { if (doc.body.scrollTop > 300 || doc.documentElement.scrollTop > 300) { _top.display = "block"; _top.opacity = "1"; } else { _top.opacity = "0"; let x = setInterval('_top.display = "none" ',1500); clearInterval(x); } } </script>
要安裝在 Blogger HTML小工具的朋友 >> 請按

PS : Blogger HTML小工具，不要安裝在側欄，最好裝在 Foot 區段

 要安裝在 wordPress 的朋友

佈景主題檔案編輯器 : 選取 ~ 佈景主題頁尾 (footer.php)

程式碼嵌入如下圖位置 <?php wp_footer(); ?> 後面貼上