Bootstrap Scrollspy
Scrollspy is a Bootstrap plugin that automatically highlights navigation links as you scroll to different sections on a webpage.
It is beneficial for one-page websites or long pages with multiple sections.
How Scrollspy Works?
• Scrollspy watches your scrolling.
• When you scroll to a section (like #about or #services), it highlights the matching nav link.
• It uses IDs on sections and href in nav links to match and highlight.
Scrollspy with Top Navigation Bar
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Scrollspy Navbar</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<style>
body {
position: relative;
}
section {
height: 600px;
padding: 50px;
}
</style>
</head>
<body data-bs-spy=”scroll” data-bs-target=”#navbar-example” data-bs-offset=”0″ tabindex=”0″>
<nav id=”navbar-example” class=”navbar navbar-light bg-light fixed-top”>
<ul class=”nav nav-pills”>
<li class=”nav-item”>
<a class=”nav-link” href=”#section1″>Section 1</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#section2″>Section 2</a>
</li>
</ul>
</nav>
<div class=”container mt-5 pt-5″>
<section id=”section1″>
<h4>Section 1</h4>
<p>This is content for Section 1.</p>
</section>
<section id=”section2″>
<h4>Section 2</h4>
<p>This is content for Section 2.</p>
</section>
</div>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</body>
</html>
Output:
Explanation:
• data-bs-spy=”scroll” activates Scrollspy.
• data-bs-target=”#navbar-example” tells which nav to highlight.
• id=”section1″ and href=”#section1″ match for scroll detection.
• When user scrolls, related nav link becomes active.
Scrollspy with Sidebar
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Scrollspy Sidebar</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<style>
.scroll-container {
height: 400px;
position: relative;
overflow-y: auto;
}
section {
height: 300px;
padding: 20px;
}
</style>
</head>
<body>
<div class=”container mt-4″>
<div class=”row”>
<nav id=”sidebar-example” class=”col-3″>
<ul class=”nav nav-pills flex-column”>
<li class=”nav-item”><a class=”nav-link” href=”#item1″>Item 1</a></li>
<li class=”nav-item”><a class=”nav-link” href=”#item2″>Item 2</a></li>
</ul>
</nav>
<div class=”col-9 scroll-container” data-bs-spy=”scroll” data-bs-target=”#sidebar-example” data-bs-offset=”0″ tabindex=”0″>
<section id=”item1″> <!
<h4>Item 1</h4>
<p>This is content for Item 1.</p>
</section>
<section id=”item2″>
<h4>Item 2</h4>
<p>This is content for Item 2.</p>
</section>
</div>
</div>
</div>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</body>
</html>
Output:
Explanation:
• Sidebar nav is #sidebar-example.
• Scrollspy works inside the content area (.scroll-container).
• As you scroll inside .col-9, the left sidebar highlights the matching link.
Scrollyspy Behavior Customization
Adjusting Offset
• data-bs-offset=”0″ can be increased (like 100, 200) to adjust when the nav gets activated.
• Useful if you have a fixed navbar that hides part of the section.
Smooth Scrolling with Scrollspy
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Bootstrap Scrollspy with Smooth Scroll</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<!– Bootstrap 5 CDN –>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
<style>
body {
position: relative;
}
section {
height: 100vh;
padding: 60px 20px;
}
</style>
</head>
<body data-bs-spy=”scroll” data-bs-target=”#navbar-example” data-bs-offset=”70″ tabindex=”0″>
<!– Navigation Bar –>
<nav id=”navbar-example” class=”navbar navbar-expand-lg navbar-light bg-light fixed-top”>
<div class=”container-fluid”>
<a class=”navbar-brand” href=”#”>Scrollspy</a>
<button class=”navbar-toggler” type=”button” data-bs-toggle=”collapse” data-bs-target=”#navbarNav”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarNav”>
<ul class=”navbar-nav ms-auto”>
<li class=”nav-item”>
<a class=”nav-link” href=”#section1″>Section 1</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#section2″>Section 2</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#section3″>Section 3</a>
</li>
</ul>
</div>
</div>
</nav>
<!– Content Sections –>
<section id=”section1″ class=”bg-primary text-white”>
<h1>Section 1</h1>
<p>This is the first section.</p>
</section>
<section id=”section2″ class=”bg-success text-white”>
<h1>Section 2</h1>
<p>This is the second section.</p>
</section>
<section id=”section3″ class=”bg-warning text-dark”>
<h1>Section 3</h1>
<p>This is the third section.</p>
</section>
<!– Bootstrap 5 JS –>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js”></script>
<!– Smooth Scroll Script –>
<script>
document.querySelectorAll(‘a.nav-link’).forEach(link => {
link.addEventListener(‘click’, function (e) {
if (this.hash) {
e.preventDefault();
const target = document.querySelector(this.hash);
target.scrollIntoView({ behavior: “smooth” });
}
});
});
</script>
</body>
</html>
Output:
🔎 Short Explanation:
• This code adds smooth animation when clicking nav links.
• Instead of jumping, page scrolls smoothly to that section.
Conclusion
| Feature | Discription |
|---|---|
| .data-bs-spy=”scroll” | Turns on Scrollspy |
| data-bs-target | Tells which nav to update |
| data-bs-offset | Adjust scroll position to match |
| #id & href=”#id” | Must match for Scrollspy to work |
| Smooth Scroll JS | Makes transition smooth when clicking |
Practice Scenario
Scenario 1: Navbar Scrollspy
Objective: with 4 sections: Home, About, Services, Contact.
Expected Output:
Scenario 2: Sidebar Scrollspy
Objective: with 5 sections and custom offset.
Expected Output:
YouTube Reference :
Bootstrap ScrollSpy is a navigation feature that highlights menu items as the user scrolls through a sectioned page, helping users identify their current location on a long page.
Yes, this Bootstrap training is completely free. You can access all tutorials and learn Bootstrap at your own pace without any charges.
Ensure you use Bootstrap’s responsive classes and combine them with a properly structured HTML layout to adapt the ScrollSpy to different screen sizes.
Yes, we offer Bootstrap Scrollspy tutorial in Hindi to help Hindi-speaking students understand the concepts easily. Whether you’re a beginner or intermediate, this course is tailored to your needs.
Examples include:
- Single-page website navigation.
- Section-based content highlighting.
- Dynamic updates for table of contents.
Yes, by using Bootstrap’s JavaScript ScrollSpy plugin and adding data-target and data-spy attributes to your elements, you can create dynamic behavior.
Yes, this page provides a beginner-friendly step-by-step guide to implementing Bootstrap ScrollSpy easily and efficiently.
ScrollSpy dynamically tracks the position of the page content relative to the viewport and highlights the corresponding navigation link in a menu.
Yes, you can customize it with custom CSS for highlighting and JavaScript for advanced behaviors such as animations or delays.
