Bootstrap navbar with scrollspy
View demo (js) View demo (data-attribute) Download
Get 700+ Material components for the latest Bootstrap 5 for free. This component is also available as ready-to-use solution in MDB UI Kit.
Learn more about Bootstrap Dropdown here, or download MDB Free version with 700+ components here.
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