CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapbootstrap-4
Durutelefon1
Durutelefon1

Reputation: 115

Adding smooth scrolling to bootstrap 4.1 (While using scrollspy)?

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.

Here's the original code that i am working with (same as from bootstrap).

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

And here's what i've tried to add to enable smooth scrolling.

      <script>
          $(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() >= distance ) {
        $('#site-header').addClass('fixed-nav')
    }
    if ( $window.scrollTop() <= distance ) {
        $('#site-header').removeClass('fixed-nav')
    }
});


$('body').scrollspy({ target: '#navbar-example2',offset: 0 });
        </script>

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.

Upvotes: 2

Views: 5553

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362300

Change the jQuery selector for the click handler to...

$(".nav-link,.dropdown-item").click(function() {
  ...
});

https://www.codeply.com/go/y0LweX2FBY

The problem with the nav-link selector is that it doesn't have an href so the click handler isn't doing anything. Also, you probably want the Navbar fixed-top so that it doesn't scroll away when navigating to a section.

Upvotes: 1

Related Questions