> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.easystore.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

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

此文章將講解如何在 Aroma 與其後發佈之主題裡新增 「一鍵置頂」按鈕（回到上方、回到頂端）

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

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1c5tuf2.png)

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: #顏色代碼;`   對應按鈕背景顏色


![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_e65iz4.png)

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

**官網即會呈現「一鍵置頂」按鈕**
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_13jn70w.png)


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

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1051t62.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_5htlcg.png)