開發人員指南使用 JQuery 在 WordPress 中添加平滑滾動到頂部效果
已發表: 2022-06-03我們都喜歡 WordPress，因為它的無縫性以及在使用高效的內容管理系統時讓事情變得更容易的事實。
毫不誇張地說，簡單易用的 Web 開發對於新站長來說是一件幸事。 WordPress 具有數十種功能，允許各種網站所有者為他們的用戶提供超級流暢和交互式的界面。
那些不熟悉 WordPress 的人可以查看有關博客啟動器等資源的 WordPress 教程，其中包含有關如何啟動博客和管理博客的分步指南。
如果您只關注網站上的內容，我們想告訴您，響應式和視覺上吸引人的網站與內容一樣重要。
如果您有一個現有的網站並且您不知道從哪裡開始，請花點時間每天花 30 分鐘來考慮您網站的外觀和界面。 相信我們，因為您會逐漸找到需要修復的元素。 一旦您通過出色的視覺效果來增強您的網站，對話率就會增加。
如果您已經投入了為用戶提供流暢的網站訪問體驗的工作，那麼向您致敬！ 好吧，我們為每個想要進一步為其網站提供前衛改變並改善其網站的整體視覺性能的人準備了一個很棒的教程。
在這篇博文中，讓我們指導您在 jQuery 的幫助下在 WordPress 中添加平滑滾動到頂部效果。
為什麼要使用平滑滾動？
通常，當網站有很長的文章並且用戶正在瀏覽它們時，他們可能會發現到達網頁末尾會令人沮喪。
因此，如果您的網站只需單擊一下即可平滑滾動到頂部，那麼讀者會發現您的網站無縫且超級流暢。
因此，如果您是網站所有者或數字營銷人員，您需要成為機會主義者，並確保您盡一切努力為您的網站吸引更多的有機受眾。
在 WordPress 中添加平滑滾動到頂部效果的方法
為了能夠在 WordPress 中將平滑滾動添加到效果，您可以使用以下任何一種方法：
1.使用一些用jQuery編寫的代碼
2.使用插件
我們通常更喜歡編碼而不是插件，因為如果以正確的方式完成，就沒有打嗝的餘地。 插件有時會降低網站的加載速度，但編碼可以幫助您添加一些自定義，而不會影響速度。 特別是，在本教程中，我們將解釋編碼過程。
如何通過編碼在 WordPress 中添加平滑滾動到頂部效果？
為了使用編碼在您的 WordPress 網站上添加平滑滾動到頂部效果，您需要執行以下四個步驟：
- 創建一個“Smoothscrolleffect.js”文件。
- 將“Smoothscrolleffect.js”功能附加到您的主題。
- 在主題中添加圖標
- 將效果與網頁鏈接
完成這 4 個步驟後，您就可以吸引更多讀者了。 如果您是程序員，那麼您可以根據自己的要求創建自己的腳本。
對於非程序員，我們已經徹底解釋了每個步驟並添加了所需的代碼。 因此，您只需閱讀這些步驟並相應地執行它們。
第 1 步：創建一個“Smoothscrolleffect.js”文件
這是您將為此步驟創建的最重要的文件。 如果您未能有效地執行此步驟，那麼您可能無法完全實現平滑滾動。
在這一步中，我們將創建一個“.js”（jQuery）文件，其中包含一個可以為頂部效果添加平滑滾動的函數。 按照步驟創建“.js”文件並將其上傳到網站目錄。
- 在您的系統中創建一個新的記事本文件。
- 複製以下代碼：
jQuery(文檔).ready(函數($){
$(窗口).scroll(函數(){
if ($(this).scrollTop() < 200) {
$('#smoothup') .fadeOut();
} 別的 {
$('#smoothup') .fadeIn();
}
});
$('#smoothup').on('點擊', function(){
$('html, body').animate({scrollTop:0}, 'fast');
返回假；
});
});
- 將代碼粘貼到記事本文件中。
- 使用任何名稱保存它，但確保擴展名為“.js”。
- 登錄到您網站的 cPanel。
- 導航到網站的目錄“/js/”
注意：如果您的網站沒有 js 目錄，那麼您必須創建一個。
- 在目錄中上傳您在系統上創建的“.js”文件。
第 2 步：將平滑滾動附加到主題
在上面的步驟中，我們在網站的目錄中創建了一個文件（帶有平滑滾動功能），在這一步中，我們將平滑滾動功能鏈接到我們的主題。 為此，請按照下列步驟操作：
在 WordPress 管理儀表板中導航到您的主題編輯器。 打開 function.php 進行編輯。 並在其中粘貼以下代碼。
wp_enqueue_script('smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array('jquery'), ”, true);
點擊“保存更改”。
步驟 3. 將圖標添加到主題
顯然，您想向您的網站添加一個圖標，通過它您可以讓讀者滾動到頂部。 除此之外，您需要使其更具交互性和響應性。 您可以在 CSS 的幫助下完成，如下所示：
- 在主題編輯器中導航到您的主題的 stylesheet.css。
- 複製以下代碼。
#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(”) 不重複；
}
- 將其粘貼到主題的樣式表中。
- 點擊“保存更改”。
在這裡您可以根據需要更改圖標； 我們使用了一個參考。 為了更改圖像，您可以將其上傳到您的網站，然後將其粘貼到上述代碼中的 Background: URL 字段中。
第4步：將平滑滾動與網頁鏈接。
現在我們已經創建了一個“.js”文件，並將其上傳到網站目錄，附加主題，並為效果創建了一個圖標，是時候進行最後一步了。 我們現在將平滑滾動效果鏈接到網站的所有網頁。 按照步驟：
- 在主題編輯器中打開 footer.php。
- 複製以下代碼：
- <a href=”#top” id=”smoothup” title=”返回頂部”></a>
- 將其粘貼到 footer.php 頁面中。
- 點擊“保存更改”。
恭喜！您已成功使用 jQuery 將平滑滾動頂部效果添加到您的 WordPress 網站。
結論
我們希望上述教程能有效地幫助您使用 JQuery 在 WordPress 中添加“平滑滾動到頂部”效果，並以出色的網站導航體驗吸引您的用戶。
如果您碰巧在執行上述步驟時遇到任何問題，請在下方發表評論讓我們知道。
