回到頁首頂端按鈕 文章列表

回到頁首頂端按鈕


現在網頁在設計時為了提升使用者體驗,漸漸大家都會加入回到頂端按鈕,讓滑到下方的文章可以很快地回到最上方操作其他的動作,
部分的 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>


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


要安裝在 Blogger HTML小工具的朋友 >> 請按

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




 要安裝在 wordPress 的朋友

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

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



留言 ( 3 )

  1. 用在自適應模板時,當側邊欄被收合起來就不會出現,所以用手機是看不見的。

    回覆刪除
    回覆
    1. 將 HTML 小工具,移到頁尾 ~ Foot [Qz::1409158357-1245930750.gif]

      刪除
    2. 原來是放錯位置,已解決,感恩。

      刪除

張貼留言




           

預 覽 視 窗

新舊排序 :

    © Copyright 2021 Design By 灰鴿   技術堤供 : Blogger