【官網設計】如何新增「一鍵置頂」 按鈕（Aroma 與其後發佈之主題）

此文章將講解如何在 Aroma 與其後發佈之主題裡新增 「一鍵置頂」按鈕

步驟一：編輯原始碼

1. EasyStore 後台 → 銷售管道 → 品牌官網 → 佈景主題 → 編輯原始碼

2. 找到 `theme.liquid ` 文件

3. 複製以下代碼

<style>
  #scrollTopButton {
      position: fixed;
      right: 0px;
      bottom: 110px;
      cursor: pointer;
      width: 45px;
      height: 45px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 3;
      background-color: #9E8137;
      border-radius: 0px;
  }
</style>
<div id="scrollTopButton" style="display: none">
  <svg class="svg-icon" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22,18.25a1.21,1.21,0,0,1-.88-.37L12,8.77,2.88,17.88a1.24,1.24,0,0,1-1.76-1.76l10-10a1.24,1.24,0,0,1,1.76,0l10,10a1.24,1.24,0,0,1,0,1.76A1.21,1.21,0,0,1,22,18.25Z"/></svg>
</div>
<script>
  $( document ).ready(function() {
    var winScroll = $(this).scrollTop(),
    this_el = $("#scrollTopButton");

    if(winScroll > 400){
      this_el.fadeIn();
    }else{
      this_el.fadeOut();
    }

    $("#scrollTopButton").click(function() {
      $('html,body').animate({ scrollTop: 0 });
    });

    $(window).scroll(function(){
      var winScroll = $(this).scrollTop();

      if(winScroll > 400){
        this_el.fadeIn();
      }else{
        this_el.fadeOut();
      }

    });
  });
</script>

3. 貼在 `theme.liquid ` 文件 最下方的位置

4. 如果你想更換「一鍵置頂」 按鈕的按鈕顏色和箭頭顏色，你可在代碼 background-color: #顏色代碼; 的上方加入 color: #顏色代碼;

color: #顏色代碼; 對應箭頭顏色
background-color: #顏色代碼; 對應按鈕背景顏色

步驟二：點擊儲存，完成！

官網即會呈現「一鍵置頂」按鈕

💡 小提醒：

1. 若你要更換「一鍵置頂」 按鈕的背景顏色，你可在代碼裡找到 background-color: ，然後更換顏色代碼即可

2. 如果要更換「一鍵置頂」 按鈕的圖標顏色，你可到佈景主題設定 → 設定 → 顏色 → 更換 「一般內文字色」

更新時間： 04/06/2024