« Back to main
Scrollspy navigation image

Bootstrap navbar with scrollspy

View demo (js) View demo (data-attribute) Download

Bootstrap 4 gives you built-in scrollspy feature. When you scroll up or down it will add active class to menu item based on currently active viewport.

It does not mean that, if you click on certain menu the page will scroll. No, bootstrap's scrollspy just adds class according to your visible div or section. To make animated scroll effect on click (like landing page), we need to write our own script

This example also could be useful for landing page or any single page navigation

Steps to make scrollspy with smooth animation
  • Create navbar on top of page
  • Add few section on website and add unique ID for each of them
  • Add sane ID of each section to you link's href attribute
  • Activate scrollspy function with data- attribute or via javascript
  • Add fixed-top class on navbar
  • With javascript: $('body').scrollspy({ target: '#navbar_1' });
  • With data- attribute to body tag: data-spy="scroll" data-offset="90" data-target="#navbar_ID"
Here are basic code snippets

« Back to all examples

Creating e-commerce project?