Jquery Smooth Scrolling anchor

Question

I am having a problem, so basically, I tried to add a smooth scrolling with jquery, I want to have a smooth scrolling everytime I click in my navbar anchor link, I tried to do it by myself but it's not working, any help would be much appreciated, Thanks.

// 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

You appear to be using the slim build of jQuery, which doesn't include most of the library. Instead, you should be using the full version and just need to put your script in document ready event :

    <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>

I tried this Here and it worked fine. if this doesn't solve your issue then you probably have another java script error in your code. I hope it helps.