• 主頁
  • 文章
  • 指導
  • 如何使用 jQuery 在 WordPress 中添加平滑滾動到頂部效果

如何使用 jQuery 在 WordPress 中添加平滑滾動到頂部效果

已發表: 2022-08-12

您想在 WordPress 網站的頁面頂部添加平滑滾動效果嗎？

當您有一個長頁面並希望為您的用戶提供一種返回頂部的簡單方法時，滾動到頂部效果非常棒。 它有助於改善您網站的用戶體驗。

在本文中，我們將向您展示如何使用 jQuery 和插件在 WordPress 中添加平滑的滾動到頂部效果。

How to scroll to top effect using jQuery

什麼是平滑滾動，什麼時候應該使用它？

除非該站點具有粘性標題菜單，否則滾動到長 WordPress 頁面或帖子底部的用戶必須手動滑動或滾動返回頂部以導航站點。

這可能是一個真正的煩惱，用戶通常會簡單地點擊後退按鈕並離開。 這就是為什麼您需要一個可以快速將用戶引導到頁面頂部的按鈕的原因。

您可以在不使用 jQuery 的情況下將此功能添加為簡單的文本鏈接，如下所示： 

<a href="#" title="Back to top">^Top</a>

這將通過在幾毫秒內向上滾動整個頁面將用戶發送到頂部。 它有效，但效果可能會很刺耳，就像你在路上碰到顛簸時一樣。

平滑滾動與此相反。 它將以視覺上令人愉悅的效果將用戶滑回頂部。 使用這樣的元素可以極大地改善您網站上的用戶體驗。

也就是說，讓我們看看如何使用 WordPress 插件和 jQuery 將平滑滾動添加到頂部效果。

如何使用 WordPress 插件添加平滑的滾動到頂部效果

建議初學者使用此方法，因為您可以在 WordPress 網站上添加滾動到頂部的效果，而無需接觸任何一行代碼。

您需要做的第一件事是安裝並激活 WPFront Scroll Top 插件。 如果您需要幫助，請參閱我們的指南，了解如何安裝 WordPress 插件。

激活後，您可以從 WordPress 儀表板轉到設置»滾動頂部。 在這裡您可以配置插件並自定義平滑滾動效果。

首先，您需要單擊“啟用”複選框以激活您網站上的滾動至頂部按鈕。 接下來，您將看到編輯滾動偏移、按鈕大小、不透明度、淡入淡出持續時間、滾動持續時間等的選項。

Edit WPfront scroll top settings

如果向下滾動，您會發現更多選項，例如編輯自動隱藏時間、啟用在小型設備上隱藏按鈕的選項以及將其隱藏在 wp-admin 屏幕上。

您還可以編輯按鈕在單擊時的作用。 默認情況下，它將滾動到頁面頂部，但您可以將其更改為滾動到帖子中的特定元素，甚至鏈接到頁面。

還有一個選項可以更改按鈕的位置。 默認情況下，它會出現在屏幕的右下角，但您也可以選擇將其移動到其他任何角落。

More edit WPfront scroll top settings

WPFront Scroll Top 插件還提供過濾器以僅在選定頁面上顯示滾動到頂部按鈕。

通常，它會出現在您的 WordPress 博客的所有頁面上。 但是，您可以導航到“在頁面上顯示”部分並選擇您希望在哪裡顯示滾動到頂部的效果。

Choose where to display the effect

該插件還提供了可供您選擇的預建按鈕設計。 您應該能夠輕鬆找到與您的網站相匹配的設計。

如果您找不到適合您的預建圖像按鈕，則可以選擇從 WordPress 媒體庫上傳自定義圖像。

Choose an image button

完成後，只需單擊“保存更改”按鈕。

您現在可以訪問您的網站以查看滾動到頂部按鈕的運行情況。

Scroll to top button preview

在 WordPress 中使用 jQuery 添加平滑滾動到頂部效果

不建議初學者使用此方法。 它適合喜歡編輯主題的人，因為它包括向您的網站添加代碼。

我們將在您的 WordPress 主題中使用 jQuery、一些 CSS 和一行 HTML 代碼來添加平滑滾動頂部效果。

首先，打開像記事本這樣的文本編輯器並創建一個文件。 繼續並將其保存為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/文件夾。 有關詳細信息，請參閱我們的指南，了解如何使用 FTP 將文件上傳到 WordPress。

如果你的主題沒有/js/目錄，那麼你可以創建一個並將smoothscroll.js上傳到它。 您還可以查看我們關於 WordPress 文件和目錄結構的指南以獲取更多信息。

這段代碼是一個 jQuery 腳本，它將為一個將用戶帶到頁面頂部的按鈕添加平滑滾動效果。

您需要做的下一件事是在您的主題中加載smoothscroll.js文件。 為此，我們將在 WordPress 中加入腳本。

之後，只需將此代碼複製並粘貼到主題的functions.php文件中即可。 我們不建議直接編輯主題文件，因為最輕微的錯誤可能會破壞您的網站。 相反，您可以使用 WPCode 之類的插件，並按照我們的教程了解如何在 WordPress 中添加自定義代碼片段。 

wp_enqueue_script( 'smoothup', get_template_directory_uri() . 'https://cdn2.wpbeginner.com/js/smoothscroll.js', array( 'jquery' ), '',  true );

在上面的代碼中，我們告訴 WordPress 加載我們的腳本並加載 jQuery 庫，因為我們的插件依賴於它。

現在我們已經添加了 jQuery 部分，讓我們添加一個指向我們的 WordPress 站點的實際鏈接，該鏈接將用戶帶回頂部。 只需將此 HTML 粘貼到主題的footer.php文件中的任何位置。 如果您需要幫助，請參閱我們的教程，了解如何在 WordPress 中添加頁眉和頁腳代碼。 

<a href="#top" id="smoothup" title="Back to top"></a>

您可能已經註意到 HTML 代碼包含一個鏈接但沒有錨文本。 這是因為我們將使用帶有向上箭頭的圖像圖標來顯示返回頂部按鈕。

在這個例子中，我們使用了一個 40x40px 的圖標。 只需將下面的自定義 CSS 添加到主題的樣式表中。

在此代碼中，我們使用圖像圖標作為按鈕的背景圖像並將其設置在固定位置。 我們還添加了一點 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) }
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 上找到我們。