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