如何在按鈕點擊時使用 jQuery 動畫平滑地捲動到特定元素？

點擊按鈕時動畫捲動到特定元素

當點擊按鈕，您可以使用 jQuery 的動畫功能。

HTML 結構：

建立一個帶有 id 或類別的按鈕元素，以便在 JavaScript 中引用它。另外，設定要捲動到的目標元素的 id。

JavaScript:

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

在此腳本中，當單擊#clickMe 按鈕時，它會觸發html 和body 元素的動畫滾動到#targetElement 的頂部偏移量。 600 參數設定動畫的持續時間（以毫秒為單位）。

範例：

考慮以下HTML 結構：

<code class="html"><a id="clickMe" href="#">Go to Div</a>

<div id="targetElement">Target Div</div></code>

當「對應的JavaScript :

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

當「🎜>當「🎜 Go to Div”按鈕時，頁面將平滑捲動至「Target Div」元素。

以上是如何在按鈕點擊時使用 jQuery 動畫平滑地捲動到特定元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！