對於內容豐富或頁面較長的網頁，使用者在瀏覽過程中可能需要頻繁捲動，這就容易導致視覺疲勞。
所以為了避免這種情況，增加網頁的易用性，也是為了兼顧提升用戶體驗，我們一般透過在頁面上添加「回到頂部」按鈕來達到這些效果，同時還能節省用戶時間和精力。
最重要的是，在行動裝置上，因為螢幕較小，手動滾動更加耗時，所以返回頂部功能會更有必要。
大部分評分較高的WordPress主題，都會有自備的回頂端按鈕（Back to Top），我們通常在「Appearance」 –> 「Customize」裡面可以找到對應的設定。
例如我用的是Astra的主題，會有自備的（Scroll to Top）按鈕。
但跟主題自帶的返回頂部按鈕相比，透過Elementor製作更具優勢。我們使用Elementor製作的返回頂部按鈕，可以：
- 製作一個自訂的返回頂部按鈕的外觀，包括顏色、形狀、大小、圖示、動畫效果等。
- WordPress主題通常都是給我們預設好位置，Elementor允許我們將回到頂部（Back to Top）按鈕放置在頁面的任何位置，確保最佳的使用者體驗和視覺效果。
本文將詳細介紹如何在WordPress網站中使用Elementor外掛程式（免費版）建立並自訂返回頂部按鈕。
開始之前我們需要：
- 已在WordPress 網站上安裝並啟用Elementor 外掛程式。並且使用Elementor製作了一個Header和Footer（且設定Header和Footer為整站展示）
- 查看該篇使用Elementor製作懸浮按鈕的教程，跟著操作進行到第四步。
給Header新增一個ID選擇器
我們開啟使用Elementor製作的Header，開啟「Advanced」選項卡，在CSS ID中輸入一個自訂的ID選擇器。
我這邊以back-to-top作為該ID選擇器的名稱。
這邊要注意不要新增一個頁面中已有的CSS ID選擇器，不然在後面設定「回到頂部」功能的時候會出現跳到另外一個ID選擇器對應的元件中。
點擊發布。
給懸浮按鈕新增返回頂部的功能
當我們製作出懸浮按鈕後，製作返回頂部功能已經成功了一大步。現在我們還需要做的就是為我們的懸浮按鈕添加「返回頂部」這個功能：而我們只需要在Link中輸入#back-to-top（我們在上面設定的ID選擇器名稱）即可。記得，需要帶#。
完成後，點擊發布。
至此，返回頂部按鈕已製作完成。