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


您是否看到過向頁面頂部效果添加平滑滾動的網站? 當頁面較長時,這非常好,並且您希望為用戶提供一種簡便的方法來回到頂部。 最近,我們的一位讀者問我們有關在WordPress中添加平滑滾動以達到最佳效果的問題。 在本文中,我們將向您展示如何使用jQuery在WordPress中添加平滑滾動以達到最佳效果。

注意:本教程是為那些喜歡編輯主題的DIY中級用戶創建的。 如果要使用插件方法,請使用平滑的頁面滾動到頂部插件。 對於那些想學習如何在沒有插件的情況下進行操作的人,請繼續閱讀。

什麼是“平滑滾動”以及何時使用?

滾動到頂部示例

當頁面或帖子中包含很多內容時,用戶將被迫向下滾動以閱讀那些內容。 當用戶向下滾動時,您的所有導航鏈接都會上升。 當用戶閱讀完該文章後,他們需要向上滾動才能查看您網站上的其他操作。 滾動到頂部按鈕可將用戶迅速帶到頁面頂部。 您可以將其添加為文本鏈接,而無需使用jQuery,如下所示:

^Top

它只是將用戶發送到頁面頂部,並以毫秒為單位向上滾動整個頁面。 它是功能性的,但有點像路上的顛簸。 平滑滾動與此相反。 它將用戶平穩地滑回到頁面頂部。 這樣可以產生很好的效果並改善用戶體驗。

在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 對此。 這段代碼是jQuery腳本,它將為將用戶帶到頁面頂部的按鈕添加平滑的滾動效果。

接下來,您需要添加 smoothscroll.js 您的主題。 為了更好地做到這一點,我們將腳本排入WordPress(有關如何在WordPress中正確添加腳本的指南,以了解更多信息)。 將此代碼複製並粘貼到主題的 functions.php 文件。

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );

在上面的代碼中,我們已經告訴WordPress加載腳本並加載jQuery庫,因為我們的插件依賴於此。 現在我們已經添加了jQuery部分,讓我們添加到WordPress網站的實際鏈接,使用戶回到頂部。 將此HTML粘貼到主題的任何位置 footer.php 文件。


如您所見,我們已經添加了鏈接,但尚未將其鏈接到任何文本。 這是因為我們將使用帶有向上箭頭的圖像圖標來顯示“返回頂部”按鈕。 在此示例中,我們使用40x40px圖標。 將此添加到主題的樣式表中。

#smoothup { 
height: 40px; 
width: 40px; 
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("http://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中,我們為圖像圖標使用了固定位置,並將圖像圖標用作背景圖像。 您可以使用WordPress媒體上傳器上傳圖片圖標,然後獲取圖片網址以將其粘貼為背景網址。 我們還在按鈕上添加了一些CSS動畫,當用戶將鼠標懸停在按鈕上時,該動畫會旋轉按鈕。

滾動到頂部效果使用戶可以返回頂部並在您的網站上找到其他要做的事情。 您可以做的另一件事是添加一個浮動的頁腳欄,就像我們在網站上一樣,以顯示特色內容。 如果您不希望用戶滾動到頂部分享您的文章,那麼我們強烈建議您像WPBeginner一樣使用浮動社交分享欄插件。

我們希望本文能幫助您使用jQuery在頁面頂部效果上添加平滑滾動。 要查看WordPress中jQuery的其他一些不錯用法,您可以查看我們的jQuery FAQ手風琴文章或延遲加載圖像文章。

您認為滾動至最佳效果有用嗎? 讓我們在下面留下評論。