如何在按钮单击时使用 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中文网其他相关文章！