如何使用 jQuery 透過點擊按鈕平滑滾動到網頁上的特定部分或目標？

jQuery：使用按鈕點選跳到特定位置或目標

導覽網頁時，通常需要快速跳到特定部分或目標。使用 jQuery，此任務變得簡單。

要實現此目的，您可以利用 click() 事件處理程序來偵聽按鈕點擊。在事件處理程序中，使用 jQuery 的 animate() 方法平滑地捲動到所需的目標。以下是詳細的細分：

HTML 標籤：

<code class="html"><button id="clickMe">Jump to Section</button>

<!-- Targets for scrolling -->
<div id="target1">Section 1</div>
<div id="target2">Section 2</div></code>

JavaScript 程式碼：

<code class="javascript">$('#clickMe').click(function() {
  $("body, html").animate({
    scrollTop: $('#target1').offset().top
  }, 600);
});</code>

我們使用$('#clickMe') 選擇按鈕。
• 點擊按鈕時，我們使用 animate() 啟動滾動動畫。
• 目標元素由其 ID (#target1) 標識。
• offset() .top 屬性傳回目標元素距離頁面頂部的垂直偏移。
• 600 參數指定動畫持續時間（以毫秒為單位）（可選）。

透過使用此程式碼，按一下按鈕將無縫向下捲動至「target1」div。您可以根據需要修改目標ID以跳到頁面上的不同部分或目標。

以上是如何使用 jQuery 透過點擊按鈕平滑滾動到網頁上的特定部分或目標？的詳細內容。更多資訊請關注PHP中文網其他相關文章！