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.

Related Posts


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…


How to Create Audio Visualizations with JavaScript | Wave.js

Audio Visualizer Library – wave.js is a vanilla javascript audio visualization library that provides 20+ creative audio visualization effects to bring more engagement to your visitor. Contribute…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…

Leave a Reply

Your email address will not be published. Required fields are marked *