How to make use of it:

1. Load the mandatory assets in your Bootstrap 4/5 undertaking.

<!-- Required -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

<!-- Required For Bootstrap 4 -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/anime.min.js"></script>

2. Create a Bootstrap navbar containing anchor links on the web page.

<!-- Bootstrap 5 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
  <div class="container px-4">
    <a class="navbar-brand" href="#page-top">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- Bootstrap 4 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
  <div class="container">
    <a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Services</a></li>
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

3. The primary script to activate the scrolling navigation.

/*
* Bootstrap 5
*/
window.addEventListener('DOMContentLoaded', event => {

    // Activate Bootstrap scrollspy on the main nav element
    const mainNav = document.body.querySelector('#mainNav');
    if (mainNav) {
      new bootstrap.ScrollSpy(document.body, {
          target: '#mainNav',
          offset: 74,
      });
    };

    // Collapse responsive navbar when toggler is visible
    const navbarToggler = document.body.querySelector('.navbar-toggler');
    const responsiveNavItems = [].slice.call(
          document.querySelectorAll('#navbarResponsive .nav-link')
    );
    responsiveNavItems.map(function (responsiveNavItem) {
      responsiveNavItem.addEventListener('click', () => {
        if (window.getComputedStyle(navbarToggler).display !== 'none') {
          navbarToggler.click();
        }
      });
    });

});

/*
* Bootstrap 4
*/
(function ($) {

  // Smooth scrolling using anime.js
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('click', function () {
    if (
      location.pathname.replace(/^\//, "") ==
      this.pathname.replace(/^\//, "") &&
      location.hostname == this.hostname
    ) {
      var target = $(this.hash);
      target = target.length ?
        target :
        $("[name=" + this.hash.slice(1) + "]");
      if (target.length) {
        anime({
          targets: 'html, body',
          scrollTop: target.offset().top - 56,
          duration: 1000,
          easing: 'easeInOutExpo'
        });
        return false;
      }
    }
  });

  // Closes responsive menu when a scroll trigger link is clicked
  $(".js-scroll-trigger").on('click', function () {
    $(".navbar-collapse").collapse("hide");
  });

  // Activate scrollspy to add active class to navbar items on scroll
  $("body").scrollspy({
    target: "#mainNav",
    offset: 56,
  });

})(jQuery);

npm Scripts

• npm run build builds the project – this builds assets, HTML, JS, and CSS into dist
• npm run build:assets copies the files in the src/assets/ directory into dist
• npm run build:pug compiles the Pug located in the src/pug/ directory into dist
• npm run build:scripts brings the src/js/scripts.js file into dist
• npm run build:scss compiles the SCSS files located in the src/scss/ directory into dist
• npm run clean deletes the dist directory to prepare for rebuilding the project
• npm run start:debug runs the project in debug mode
• npm start or npm run start runs the project, launches a live preview in your default browser, and watches for changes made to files in src

Responsive Scrolling Bootstrap Navbar For One Page Website, Scrolling Nav Plugin/Github, scrolling navbar bootstrap 4, scrolling navigation bar bootstrap, one page scroll navigation, bootstrap scrollspy smooth scroll

See Demo And Download