title: Adding smooth scrolling to bootstrap 4.1 (While using scrollspy)?
body: <p>So what i'm trying to do over here is to use the bootstrap 4.1s scrollspy function in my navbar. I've managed to get that to work. However I would also like to add smooth scrolling to it. After searching over the whole internet I still haven't managed to fix it.</p>
  
  <p>Here's the original code that i am working with (same as from bootstrap).</p>
  
  <pre><code>&lt;nav id="navbar-example2" class="navbar navbar-light bg-light"&gt;
    &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
    &lt;ul class="nav nav-pills"&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="#fat"&gt;@fat&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="#mdo"&gt;@mdo&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item dropdown"&gt;
        &lt;a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"&gt;Dropdown&lt;/a&gt;
        &lt;div class="dropdown-menu"&gt;
          &lt;a class="dropdown-item" href="#one"&gt;one&lt;/a&gt;
          &lt;a class="dropdown-item" href="#two"&gt;two&lt;/a&gt;
          &lt;div role="separator" class="dropdown-divider"&gt;&lt;/div&gt;
          &lt;a class="dropdown-item" href="#three"&gt;three&lt;/a&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;div data-spy="scroll" data-target="#navbar-example2" data-offset="0"&gt;
    &lt;h4 id="fat"&gt;@fat&lt;/h4&gt;
    &lt;p&gt;...&lt;/p&gt;
    &lt;h4 id="mdo"&gt;@mdo&lt;/h4&gt;
    &lt;p&gt;...&lt;/p&gt;
    &lt;h4 id="one"&gt;one&lt;/h4&gt;
    &lt;p&gt;...&lt;/p&gt;
    &lt;h4 id="two"&gt;two&lt;/h4&gt;
    &lt;p&gt;...&lt;/p&gt;
    &lt;h4 id="three"&gt;three&lt;/h4&gt;
    &lt;p&gt;...&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's what i've tried to add to enable smooth scrolling.</p>
  
  <pre><code>      &lt;script&gt;
            $(document).ready(function() {
      $(".nav-item").click(function() {
          var t = $(this).attr("href");
          $('.active').removeClass('active');
          $("html, body").animate({
              scrollTop: $(t).offset().top - 50
          }, {
              duration: 1e3,
  
          });
  
          $('body').scrollspy({ target: '#navbar-example2',offset: $(t).offset().top });
          $(this).parent().addClass('active');
  
  
  
  
  
          return false;
      });
  
  });
  
  
  
  //navbar
  var distance = $('#site-header').offset().top,
      $window = $(window);
  
  $window.scroll(function() {
      if ( $window.scrollTop() &gt;= distance ) {
          $('#site-header').addClass('fixed-nav')
      }
      if ( $window.scrollTop() &lt;= distance ) {
          $('#site-header').removeClass('fixed-nav')
      }
  });
  
  
  $('body').scrollspy({ target: '#navbar-example2',offset: 0 });
          &lt;/script&gt;
  </code></pre>
  
  <p>As of now I feel stuck and I don't understand what it is i am doing wrong. Because I can't make it work. I've also tried adding different variations of css:s but I can't make it work. Any help would be appriciated.</p>