您是否想在 WordPress 網站上添加回頂效果？這種效果在頁面較長時非常有用，可以讓用戶輕鬆返回頁面頂部，提升網站的用戶體驗。
本文將教您如何使用 jQuery 和插件在 WordPress 中添加平滑回頂效果。
什麼是平滑回頂效果？什麼時候應該使用？
除非網站具有固定的標頭菜單，否則用戶在滾動到頁面的底部時需要手動返回頂部，這可能會讓人感到厭煩，甚至可能因此離開網站。因此，您需要一個按鈕，快速將用戶送回到頁面的頂部。
您可以簡單地添加一個文本鏈接實現此功能，無需 jQuery，如下所示：
<a href="#" title="返回頂部">^頂部</a>它會在幾毫秒內將用戶返回頁面頂部，但效果可能會顯得生硬，就像突然遇到颠簸一般。相反，平滑回頂效果可以讓用戶以視覺上愉悅的方式返回頂部，顯著改善網站的用戶體驗。
接下來，讓我們看看如何使用 WordPress 插件和 jQuery 添加平滑回頂效果。
使用 WordPress 插件添加平滑回頂效果
這種方法適合初學者，無需編寫任何代碼即可在 WordPress 網站上添加平滑回頂效果。首先，您需要安裝並激活 WPFront Scroll Top 插件。如果需要幫助，請參閱我們的 WordPress 插件安裝指南。
啟用插件後，您可以從 WordPress 後台導航到 設定 » Scroll Top 在這裡進行插件配置並自定義平滑回頂效果。首先，您需要勾選「啟用」選項，以激活網站上的回頂按鈕。接下來，您可以修改滾動偏移、按鈕大小、不透明度、淡出持續時間、滾動持續時間等。
下拉並找到更多選項，例如自動隱藏時間、在小設備上隱藏按鈕以及在 wp-admin 屏幕上隱藏按鈕。您還可以編輯按鈕的操作，默認情況下，它會滾動到頁面頂部，但您可以將其更改為滾動到文章中的特定元素，甚至鏈接到一個頁面。
插件還提供了多種預建按鈕設計可供選擇，您能夠輕鬆找到適合網站的設計。如果找不到合適的預建圖片按鈕，您也可以從 WordPress 媒體庫上傳自定義圖片。
完成設置後，點擊「保存更改」按鈕即可。您現在可以訪問網站，查看回頂按鈕的效果。
使用 jQuery 在 WordPress 中添加平滑回頂效果
這種方法不適合初學者，適合那些對編輯主題感到舒適的人，因為它需要在網站上添加代碼。我們將使用 jQuery、一些 CSS 和一行 HTML 代碼在您的 WordPress 主題中添加平滑回頂效果。
首先，打開文本編輯器（如 Notepad），創建一個文件，並將其保存為 smoothscroll.js。接下來，將以下代碼複製並粘貼到文件中：
jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() < 200) {
$('#smoothup').fadeOut();
} else {
$('#smoothup').fadeIn();
}
});
$('#smoothup').on('click', function(){
$('html, body').animate({scrollTop:0}, 'fast');
return false;
});
});保存文件並將其上傳到您的 WordPress 主題目錄中的 /js/ 文件夾中。如果您的主題沒有 /js/ 目錄，可以創建一個並將 smoothscroll.js 上傳其中。更多詳細步驟，請參閱我們的 FTP 上傳文件指南。
接下來需要在主題中加載 smoothscroll.js 文件。為此，我們將在 WordPress 中掛載腳本。將以下代碼複製並粘貼到主題的 functions.php 文件中。我們不建議直接編輯主題文件，因為即使是最細微的錯誤都可能導致您的網站崩潰。相反，您可以使用像 WPCode 這樣的插件，並參閱我們的如何在 WordPress 中添加自定義代碼片段教程。
wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '', true );在上述代碼中，我們告訴 WordPress 加載我們的腳本，同時加載 jQuery 庫，因為我們的插件依賴於它。
現在，我們已經添加了 jQuery 部分，接下來讓我們在 WordPress 站點中添加一個將用戶返回頂部的鏈接。將以下 HTML 粘貼到主題的 footer.php 文件中。如果需要幫助，請參閱我們的如何在 WordPress 中添加頁眉和頁腳代碼教程。
<a href="#top" id="smoothup" title="返回頂部"></a>您可能注意到 HTML 代碼中包含一個鏈接，但沒有錨文本。這是因為我們將使用向上的箭頭圖標作為顯示返回頂部按鈕。在此示例中，我們使用 40x40 像素的圖標。簡單地在主題的樣式表中添加以下自定義 CSS。
#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}
#smoothup:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
background: url('') no-repeat;
}在上述 CSS 中，請確保將 https://www.example.com/wp-content/uploads/2013/07/top_icon.png 替換為您想使用的圖片 URL。您可以使用 WordPress 媒體上傳器上傳自己的圖標，然後複製圖片 URL 並將其粘貼到代碼中。
希望這篇文章幫助您在您的網站上使用 jQuery 添加平滑回頂效果。您可能還想查看我們專家推薦的小型企業最佳 WordPress 插件，以及我們的逐步指南，了解如何創建網上商店。
如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道，以獲取更多 WordPress 視頻教程。還可以在 Twitter 和 Facebook 上找到我們。
