2022 年最佳免費 WordPress 平滑滾動插件

已發表: 2021-11-09

2019 年最佳免費 WordPress 平滑滾動插件

如果您創建了一個網站，但網站內容太長，在這種情況下難以理解，您可以使用 WordPress Smooth Scroll Plugins。

WordPress 平滑滾動插件將幫助您非常順暢地上下滾動網站。它不僅會改善您的網站用戶體驗，還會對轉化率產生重大影響。因為您的用戶將在您的網站上使用更長的時間。

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

你想知道為什麼其他各種網站都有平滑滾動到頁面頂部的效果嗎？如果頁面較長，則非常適合添加平滑滾動頂部效果。

這有助於改善用戶在頁面上的體驗，同時讓他們更容易快速回到頂部。

現在的問題是，如何在 WordPress 網站的頂部效果中添加平滑滾動？好吧，您可以使用 jQuery 輕鬆完成。在這裡，我們將討論如何使用 jQuery 輕鬆完成它。繼續閱讀：

什麼是平滑滾動，何時使用？

如果頁面或帖子有很多內容，用戶需要向下滾動才能閱讀所有內容。隨著用戶開始向下滾動，您的導航鏈接開始上升。

當用戶完成閱讀時，他們必須滾動查看是否有任何東西留給他/她。滾動到頂部按鈕可以讓讀者快速進行操作。您可以選擇添加此文本鏈接，而無需使用 jQuery。

 <a href="#" title="返回頂部">^頂部</a>

它將在幾分之一秒內向上滾動時將讀者發送到頁面頂部。它作為一個功能性的。

然而，平滑滾動則與此相反。平滑的滾動幫助用戶滑回頁面的頂部區域。這有助於改善您網站上的用戶體驗。

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

如果你想為頂部添加平滑滾動效果，那麼你可以使用 jQuery。同時，您需要添加一些 CSS 以及一行用於 WordPress 主題的 HTML 代碼。

首先，您需要打開一個文本編輯器，例如記事本。現在您需要創建一個文件並將其保存為 smoothscroll.js。現在您需要將代碼複製粘貼到文件區域：

jQuery(文檔).ready(函數($){
$(窗口).scroll(函數(){
if ($(this).scrollTop() < 200) {
$('#smoothup') .fadeOut();
} 
別的 {
$('#smoothup') .fadeIn();
}
});
   $('#smoothup').on('點擊', function(){
$('html, body').animate({scrollTop:0}, 'fast');
返回假；
});
});

現在您需要保存文件。之後，您可以將其上傳到 WordPress 主題目錄的 /js / 文件夾。如果您的主題沒有 /js/ 目錄，那麼您必須從創建一個開始。

之後，您可以將 smoothscroll.js 上傳到該目錄。這段代碼被稱為 jQuery 腳本，它將為按鈕添加平滑的滾動效果。它基本上是為了幫助用戶順利到達頁面頂部。

之後，您需要將此 smoothscroll.js 添加到您的主題區域。如果你想這樣做，你需要在 WordPress 中添加一個腳本。這是您需要粘貼到主題的 functions.php 文件的腳本或代碼：

wp_enqueue_script('smooth up', get_template_directory_uri() . '/js/smoothscroll.js', array('jquery'), ”, true);
此代碼向 WordPress 發送腳本命令。同時，它還告訴 WordPress 加載 jQuery 庫，因為插件依賴於它。

當您添加完 jQuery 部分後，現在您需要添加到 word press 站點的實際鏈接，這會將用戶帶回頂部區域。您需要將 HTML 代碼粘貼到主題的 footer.php 文件中的任何位置：

 <a href="#top" title="返回頂部"></a>

此步驟包括添加到文件的鏈接，但它沒有與任何文本鏈接。之所以如此，是因為您需要使用向上箭頭的圖像圖標，這將使您能夠顯示返回頂部按鈕。
以下是如何將 40x40px 圖標添加到主題樣式表的方法：

#smoothup { 
高度：40px； 
寬度：40px； 
位置：固定；
底部：50px；
右：100px；
文本縮進：-9999px；
顯示：無；
背景：url（“http://www.example.com/wp-content/uploads/2013/07/top_icon.png”）； 
-webkit-transition-duration：0.4s； 
-moz 過渡持續時間：0.4 秒； 過渡持續時間：0.4s； 
}
 
#smoothup:懸停{
-webkit 轉換：旋轉（360 度）}
背景：url('') 不重複；
}

在上述 CSS 中，您選擇了為圖像圖標的位置添加糖霜。它還包括使用圖像圖標作為背景圖像。現在您需要在 WordPress 媒體上傳器的幫助下上傳您的圖像圖標。

然後，您可以獲得必須粘貼為背景 URL 的圖像 URL。由於您已將 CSS 動畫添加到不斷旋轉按鈕的按鈕，因此用戶將鼠標指針保持在按鈕上。

現在您需要滾動到頂部效果，這將允許用戶返回頂部區域並在您的網站上找到他們可以做的其他事情。

您還可以添加一個浮動頁腳，以使功能內容易於顯示。如果您不希望您的用戶滾動到頂部區域來分享文章，您可以使用浮動社交分享欄插件使其更易於管理。