Blogger新手教學： 3個步驟設置Go Top回到頂端按鈕

文章目錄

1.  載入jQuery＋Javascript 程式碼

JavaScript是一種程式語言，可以幫助我們設計網頁上的動態、互動式行為。
而jQuery是一套JavaScript函式庫，用於簡化HTML與JavaScript之間的操作。
所以如果你的網站還沒有使用jQuery的話也要一起載入。

▼【主題 → 編輯HTML → 將程式碼貼在 </head> 前】

▼  把行數右邊的三角形收起來可以較快找到需要的位置。

jQuery

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js'/>

JavaScript

<script type='text/javascript'>
$(function() {
 $('#gotop').click(function(){
  $('html,body').animate({ scrollTop: 0 }, 'slow');
  return false;
 });
 
 $(window).scroll(function() {
  if ( $(this).scrollTop() > 700){	/*往下滑超過700px時出現GoTop按鈕*/
   $('#gotop').fadeIn();
  } else {
   $('#gotop').fadeOut();
  }
 });
});
</script>

2.  貼上HTML程式碼

▼【主題 → 編輯HTML → 將HTML 程式碼貼在 </body> 前面】

</body>就在整頁的最下方。

HTML

<a href='https://www.blogger.com/blogger.g?blogID=2031514508322140995#' id='gotop'> 
 <buttom style='font-size:16px;'>
 <b>Top</b>
</buttom>

（在blogger後台點選網址，最後那串數字就是你的Blog ID）

3.  設計按鈕樣式，貼上CSS程式碼

▼【主題 → 自訂 → 進階 → 滑到最下方〖新增CSS〗→ 貼上CSS程式碼 → 右下角〖儲存〗】

CSS

#gotop {
position:fixed;
 z-index:90;
 right:30px;		/*按鈕和左側的距離*/
 bottom:180px;		/*按鈕和底部的距離*/
 display:none;
 width:50px;		/*按鈕的寬度*/
 height:40px;		/*按鈕的高度*/
 color:#fff;
 opacity:0.7;		/*透明度*/
 line-height:40px;
 text-align: center;
 background:gray;
 border-radius:20%; 	/*導圓角*/  
}
#gotop:hover{		/*滑鼠停留時的動態效果*/  
 opacity:1.0;
}

這就是我目前網頁上使用的Go Top按鈕了。

Font Awesome

你也可以直接使用 Font Awesome 的icon，裡面有很多簡單好看的圖示。
(要先註冊會員，得到你的專屬kit之後，貼在 </head> 前才能使用網站裡的icon）

▼  語法就像下面這樣，javascript就用原本的不變。

CSS

#gotop {
    position:fixed;
    z-index:90;
    display:none;  
    right:50px;
    bottom:200px; 
    opacity:0.7;
}
#gotop:hover{
    opacity:1.0;
}

HTML

<buttom id='gotop'>
<i class='fa-solid fa-circle-chevron-up fa-2xl' style='color: #007292;'/>
</buttom>

---

參考網站：

網頁Top按鈕 (網頁回到頂端)，純 CSS+jQuery 免圖片
【Blogger技術】jQuery GoTop 按鈕讓網頁快速回到最上方
Go Top
如何使用 Font Awesome Icon 圖示（2022年最新版v6）