September 22, 2022

An Unstyled Bootstrap HTML Template to Create Smooth Scrolling

Scrolling Nav is an unstructured one-page startup template with a smooth, folded scrollable navigation bar for Bootstrap created by Start Bootstrap.

Start Bootstrap – Scrolling Nav is a responsive, intuitive, and easy-to-use scrolling navigation template designed for single-page scrolling sites.

navbar fixed top after scrolling bootstrap 4, navbar fixed on scrolling with transition bootstrap 4, one page scroll navigation css

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>

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

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 = []
          document.querySelectorAll('#navbarResponsive .nav-link')
    ); (responsiveNavItem) {
      responsiveNavItem.addEventListener('click', () => {
        if (window.getComputedStyle(navbarToggler).display !== 'none') {


* 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) {
          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 () {

  // Activate scrollspy to add active class to navbar items on scroll
    target: "#mainNav",
    offset: 56,


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

Official Website(StartBootstrap): Click Here

This superior jQuery/javascript plugin is developed by StartBootstrap. For extra Advanced usage, please go to the official website.


You may also like...

Leave a Reply

Your email address will not be published.