如何使用 jQuery 創建平滑滾動到我的網站上的特定元素？

透過點擊按鈕跳轉或捲動到特定目標

您希望使用者能夠透過點擊以下按鈕在您的網頁上垂直導航：觸發跳轉或捲動到具有特定ID 的指定div 或元素。為此，您可以使用 jQuery 輕鬆實現所需的功能。

一種方法是將 CSS 樣式指派給類似按鈕的連結。這種方法確保了非 JavaScript 環境的回退機制，實現了沒有動畫的標準跳躍。

這是一個使用 jQuery 動畫功能的最佳化範例：

<code class="javascript">$(document).ready(function() {
  $(".jumper").on("click", function( e ) {
    e.preventDefault();
    $("body, html").animate({ 
      scrollTop: $( $(this).attr('href') ).offset().top 
    }, 600);
  });
});</code>

在 HTML 結構中，您可以使用「jumper」類別定義連結到頁面上特定元素的連結。例如：

<code class="html"><a class="jumper" href="#element-1">Element 1</a></code>

當使用者點擊此連結時，提供的 jQuery 程式碼將啟動動畫捲動到 ID 為「element-1」的元素，從而提供流暢且具有視覺吸引力的導航體驗。

以上是如何使用 jQuery 創建平滑滾動到我的網站上的特定元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！