如何在不使用外掛程式的情況下，在 Elementor 中建立並應用「捲動到頂端」按鈕

A "滾動到頂端"按鈕是任何長頁面的絕佳補充。它提供使用者快速返回頁首的方式，讓導覽更容易使用，也更人性化。本指南將教您如何在 Elementor 中建立「Scroll to Top」按鈕、 不需要外掛程式並應用於整個網站，以保持外觀和感覺的一致性。

在 Elementor 中設定全局按鈕範本

從建立新範本開始：

1. 在 WordPress 面板中，移至"範本"> "新增."

2. 選擇 “Single Page” from the dropdown menu as the template type. Name it something like “捲動到頂端按鈕“.

3. 按一下 "建立範本" 開啟 Elementor 編輯器。

4. 離開圖書館: Click the “X” at the top-right corner to close the template library.

新增和自訂按鈕：

1. 拖曳"按鈕"小工具從側邊欄移到範本中。

2. 將按鈕文字變更為「捲動到頂端」或使用向上的箭頭圖示。

3. 前往圖示庫，選擇向上箭頭 圖示.

4. 選擇不同的按鈕 類型 刪除 正文.

5. 前往"風格" 標籤，並設定背景顏色、字型和邊界半徑，使其符合您的網站風格。圓形按鈕搭配對比鮮明的顏色，可以很好地讓它保持可見。

變更按鈕的樣式

1. 使用圓角
   • 前往 風格 標籤。
   • 設定 邊界半徑 至 10%，以製作一個完美的圓形按鈕。
   • 修改 襯墊 值來調整元素內部的間距。這定義了內容與 element’s borders.

2. 新增陰影效果
   • 在 盒影 設定（通常可在 樣式 > 邊框)，加入微妙的陰影來創造深度。使用類似設定：
   • 模糊：10px
   • 展開：0px
   • 顏色：選擇淺灰色或透明黑色，呈現柔軟的陰影。

3. 選擇對比鮮明的配色方案
   • Use colors that contrast with your website’s background. For example, if your background is light, opt for a bold color like blue, orange, or green.
   • 至於圖示的顏色，請確保它是白色或其他能在按鈕背景中突顯出來的顏色。

4. 新增懸停效果
   • 在 懸停 下的設定 風格 選項卡，您可以：
     • 變更 背景色 在懸浮時會變成按鈕顏色的淺色或深色。
     • 懸停動畫 可讓您控制動畫和轉場的速度。

5. 新增脈衝動畫（可選）
   • 在 進階 標籤，前往 自訂 CSS (可於 Elementor Pro) 並加入脈衝動畫：
   • 更換 #yourButtonID 與您按鈕的 ID。這將使按鈕巧妙地變大或縮小，引起人們的注意。

@keyframes pulse { 0% { transform: scale(1); }50% { transform: scale(1.05); }100% { transform: scale(1); }}#yourButtonID { animation: pulse 2s infinite; }

此代碼新增了一個 跳動動畫效果 到指定的按鈕。按鈕平滑地稍微變大，然後在 2 秒內恢復到原始大小，如此不斷重複。此效果可吸引使用者注意按鈕，使其更為顯眼。

https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-18-14-19-07.mp4

將按鈕固定到位：

1. 在"進階「標籤下的」定位、「 選擇 」固定式."

2. 將按鈕置於右下角有 20px 從兩側留出邊距，以便在使用者捲動時保持原樣。

3. 按一下 "發表". Set the display conditions to “所有頁面。” This will ensure the button is displayed on every page, providing a consistent user experience.

在頁面頂端加入錨點

1. 在 Elementor 中開啟頁面:
   • 前往 WordPress 面板，導覽到 頁數 或 職位, 並選取您要編輯的頁面。
   • 按一下 使用 Elementor 編輯 在 Elementor 編輯器中開啟頁面。

2. 選擇頂部元素:
   • Choose an element near the top of the page where you want users to be directed when they click the “Scroll to Top” button. This is typically the 標頭 部分，一個 名稱或 第一節 的頁面。
   • 按一下元素以選取它。

3. 前往「進階」標籤:
   • 選取頂端元素後，導覽到 進階 左側 Elementor 面板中的選項卡。
4. 設定 CSS ID:
   • 尋找 CSS ID 下的欄位 進階 標籤。
   • 輸入字元 最著名的 (或任何其他您喜歡的簡單字詞，例如 開始).

5. 儲存您的變更:
   • 設定 CSS ID 後，按一下 更新 來儲存頁面的變更。

重要注意事項：

• Make sure the CSS ID you entered matches the one in your “Scroll to Top” button’s 連結.例如，如果您將 CSS ID 設定為 最著名的, 按鈕的連結應該是 #top.

為按鈕新增錨點：

1. 在 Elementor 中開啟任何頁面，然後按一下頂端的元素（例如標題或區段）。
2. 設定按鈕連結。在 連結 欄位，輸入 #top (請務必包含 # 符號）。

3. 請繼續閱讀，看看結果。

https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-18-16-08-50.mp4

總結

Adding a “Scroll to Top” button in Elementor is a straightforward way to improve user experience on longer pages by allowing easy navigation back to the top. By creating a global button template, you ensure a consistent appearance across your entire site. The process includes designing the button, setting custom styles like rounded corners and shadow effects, and optionally adding animations like a pulse effect for added visibility.

Once the button is designed, you can fix it in place using the “Fixed” positioning and ensure it appears on all pages through display conditions. Additionally, by setting a CSS ID at the top of each page (such as “top”) and linking the button to this anchor (#top)，使用者按一下按鈕就可以快速捲回頁面頂端。

常見問題

1.為什麼要加入「捲動到頂端」按鈕？

此按鈕可讓使用者免於不斷捲動，尤其是在長頁面上。它提供了快速回到頂端的方法，使網站更容易瀏覽。

2.我可以為按鈕加入更多動畫效果嗎？

當然！Elementor 的動態效果可讓您加入彈跳或滑動等動態效果，讓按鈕更加搶眼。

3.是否有外掛可以做到這一點？

是的，有幾個外掛程式提供「捲動到頂端」按鈕。但透過自訂程式碼加入這些按鈕，可避免使用額外的外掛程式，讓您的網站更快速。