Question

我遇到了问题，因此，基本上，我尝试使用jquery添加平滑滚动，我想每次单击导航栏锚链接时都进行平滑滚动，我尝试自己完成此操作，但无法正常工作，任何帮助将不胜感激，谢谢。

// Smooth Scroll to div
$(".ser").click(function() {
  $("html, body").animate(
    {
      scrollTop: $("#services").offset().top
    },
    1000
  );
});

<div class="navbar">
  <div class="container">
    <div class="brand">
      <h2>Kataki</h2>
    </div>
    <ul class="links">
      <li>
        <a href="#" class="active">
          Home
        </a>
      </li>
      <li>
        <a class="ser" href="#">
          About
        </a>
      </li>
      <li>
        <a href="#">Portfolio</a>
      </li>
      <li>
        <a href="#">Testimonials</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
    </ul>
    <div class="clearfix" />
  </div>
</div>

<div id="services" class="services">
  <div class="container">
    <h2>Our Services</h2>
  </div>
</div>

Answer 1

您似乎正在使用jQuery的苗条版本，该版本不包含大多数库。相反，您应该使用完整版本，只需要将脚本置于文档就绪事件中即可：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script>
    <script>
    // Smooth Scroll to div
    $(document).ready(function(){
    $(".ser").click(function() {
    $("html, body").animate(
    {
  scrollTop: $("#services").offset().top
},1000
);
 });
  });
   </script>

我尝试了此Here，但效果很好。如果这不能解决您的问题，则您的代码中可能还有另一个Java脚本错误。希望对您有所帮助。

jQuery平滑滚动锚点

1 个答案: