如何使用 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中文网其他相关文章！