Jquery wont animate no matter what in Google Chrome

Question

My jquery code gets the "click" function, but does not animate, it just "jumps" without animation. Been struggling with it for hours now.

Jquery code

$( document ).ready(function() {


// Navigation

  $('a[href^="#"]').on('click',function (e) {
  e.preventDefault();

  var target = this.hash;
  var $target = $(target);

  $('html, body').stop().animate({
      'scrollTop': $target.offset().top
  }, 5, 'swing', function () {
      window.location.hash = target;
         });
     });
  });

HTML Code

        <!-- Content -->
<div class="slideBg" id="slideBg">
       <!-- NAVBAR -->
       <div class="row header">
        <nav class="navbar navbar-default navbar-fixed-top col-md-8 col-md-offset-2" role="navigation">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header ">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav menu col-xs-12 col-xs-offset-6 ol-md-12 col-md-offset-6 col-lg-12 col-lg-offset-6">
                <li><a  href="#slideBg"><img class="menuImage" src="img/Slide1/Header/menu/mugIcon.png" alt=""><span class="menuItem">AVALEHT</span></a></li>
                <li><a  href="#slide2"><img class="menuImage" src="img/Slide1/Header/menu/menuIcon.png" alt=""><span class="menuItem">MENÜÜ</span></a></li>
                <li><a  href="#slide3"><img class="menuImage" src="img/Slide1/Header/menu/locationIcon.png" alt=""><span class="menuItem">ASUKOHT</span></a></li>
                <li><a class="" href="#slide4"><img class="menuImage" src="img/Slide1/Header/menu/meistIcon.png" alt=""><span class="menuItem">MEIST</span></a></li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>

      </div>
      <!-- /NAVBAR -->
      <div class="slide1" id="slide1">
       <img class="s1Logo helper" src="img/Slide1/Logo/logo.png" alt="">
       <div class="nool"></div>
     </div>
   </div>



    <div class="slide2" id="slide2">
         <ul class="sideMenu">
          <li id="ahjukoogid" class="sMenuItem dashed">Ahjukoogid</li>
          <li id="magusadAmpsud" class="sMenuItem dashed">Magusad Ampsud</li>
          <li id="plaadikoogid" class="sMenuItem dashed">Plaadikoogid</li>
          <li id="soolasedAmpsud" class="sMenuItem dashed">Soolased Ampsud</li>
          <li id="tordid" class="sMenuItem dashed">Tordid</li>
          <li id="tordiloigud" class="sMenuItem dashed">Tordilõigud</li>
          <li id="tryhvlid" class="sMenuItem dashed">Trühvlid</li>
          <li id="quiche" class="sMenuItem dashed">Quiche</li>
        </ul>

    <div class="tryhvlid">
      <!-- Nimed ja Hinnad -->
    </div>
    <div class="nool"></div>
  </div>



     <div class="slide3" id="slide3">
    asd
           <div class="nool"></div>
         </div>

           <div class="slide4" id="slide4">
    asd
           <div class="nool"></div>
         </div>

I have tried multiple things. Tried different ways to get the animation work. I also tested if the document.ready function is ran with alert, it is. I checked if the jquery gets the click function and it does. everything seesm to work, but just it doesnt animate or scroll smoothly.

Answer 1

This is because in the duration parameter for the animation you're passing 5 which is interpreted as 5 milliseconds. Try something like 5000 if you want a 5 second animation.

 $('html, body').stop().animate({
      'scrollTop': $target.offset().top
  }, 5000, 'swing', function () {
      window.location.hash = target;
      });
   });
});

EDIT

Apparently this is a known issue. jQuery's animate() doesn't play nice in Chrome when setting the x-overflow property of html/body to hidden. Instead it ends up skipping the animation altogether. See this thread for more information.

Answer 2

Not sure what you expect to achieve. Have you tried without using swing? Something like this:

$( document ).ready(function() {
  // Navigation
  $('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = $(this).attr('href');
    var $target = $(target);

    $('html, body').animate({
      'scrollTop': $target.offset().top
    }, 'slow');
  });
});

JSFiddle