jQuery平滑滾動錨點

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>

我在這里嘗試過，效果很好。 如果這不能解決您的問題，則您的代碼中可能還有另一個Java腳本錯誤。 希望對您有所幫助。