How to use Scrollspy in Bootstrap 5 via JavaScript ?

Last Updated : 07 May, 2023

In this article, we will see how to use Scrollspy in Bootstrap 5 via Javascript.

Using Scrollspy in Bootstrap 5, the navigation or list group components of Bootstrap update automatically based on where the user is scrolling to indicate which link is currently active in the viewport.

There are 2 ways to use Scrollspy in Bootstrap 5:

Via data attributes: Bootstrap 5 Scrollspy Via data attributes
Via JavaScript, which we will discuss in this article.

Syntax:

const scrollSpy = new bootstrap.ScrollSpy(document.body, {
 target: '#example'
})

Here, “example” can be the id or class of any component on which you want to apply scroll spy.

Example 1: The below code example demonstrates how we can implement Scrollspy on a Navbar.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity= 
"sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" 
        crossorigin="anonymous" /> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity= 
"sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body class="m-3"> 
    <center> 
        <div id="navbar"> 
            <nav class="navbar navbar-expand-sm  
                bg-dark navbar-dark fixed-top"> 
                <ul class="navbar-nav"> 
                    <li class="nav-item"> 
                        <a class="nav-link" href="#geeks1">Geeks</a> 
                    </li> 
                    <li class="nav-item"> 
                        <a class="nav-link" href="#for">For</a> 
                    </li> 
                    <li class="nav-item"> 
                        <a class="nav-link" href="#geeks2">Geeks</a> 
                    </li> 
                </ul> 
            </nav> 
            <br><br> 
            <h1 class="text-success">GeeksforGeeks</h1> 
            <strong>Scrollspy in Bootstrap 5 via Javascript</strong>  
            <br /> 
            <div id="geeks1" class="border border-dark" 
                style="padding:20px 20px;"> 
                <h1>About Us</h1> 
                <p> 
                    GeeksforGeeks is a one-stop destination for  
                    Computer Science students. Computer Science  
                    is a huge field, thus students must select  
                    a suitable platform that can meet all their  
                    needs, including Tutorials & Courses,  
                    Placement Preparation, and Interview  
                    Experiences, among others. 
                <p> 
            </div> 
  
            <div id="for" class="border border-warning" 
                style="padding:20px 20px;"> 
                <h1>Advantages</h1> 
                <p> 
                    1. One-Stop Destination for Algorithms  
                    and Data Structures Knowledge 
                </p> 
                <p>2. Learn Multiple Programming Languages</p> 
                <p> 
                    3. Boost Your Skills with Various  
                    GeeksforGeeks Courses 
                </p> 
            </div> 
  
            <div id="geeks2" class="border border-secondary" 
                style="padding:20px 20px;"> 
                <h1>Technology</h1> 
                <p> 
                    A Computer Science portal for geeks. It  
                    contains well written, well thought and  
                    well explained computer science and  
                    programming articles, quizzes and  
                    practice/competitive programming/company  
                    interview Questions. 
                </p> 
                <p>Prepare With Us</p> 
                <p>Get Hired With Us</p> 
                <p>Grow With Usling!</p> 
            </div> 
        </div> 
    </center> 
  
    <script> 
        document.addEventListener("DOMContentLoaded", function () { 
            var scrollSpy = new bootstrap.ScrollSpy(document.body, { 
                target: '#navbar' 
            }) 
        }); 
    </script> 
</body> 
  
</html> 

Output:

Scrollspy in Bootstrap 5 via Javascript [Navbar]

Example 2: The below code example demonstrates how we can implement scrollspy on a Nested Navbar.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity= 
"sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" 
        crossorigin="anonymous" /> 
  
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity= 
"sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" 
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <div class="row"> 
        <div class="col-4"> 
            <nav id="nested-nav" class="h-100 fixed-top" 
                style="width:30%"> 
                <nav class="nav nav-pills flex-column"> 
                    <a class="nav-link" href="#CS">CS</a> 
                    <nav class="nav nav-pills flex-column"> 
                        <a class="nav-link ms-3 my-1" href="#CS-1">CS-1</a> 
                        <a class="nav-link ms-3 my-1" href="#CS-2">CS-2</a> 
                    </nav> 
                    <a class="nav-link" href="#IT">IT</a> 
                    <a class="nav-link" href="#AI">AI</a> 
                    <nav class="nav nav-pills flex-column"> 
                        <a class="nav-link ms-3 my-1" href="#AI-1">AI-1</a> 
                        <a class="nav-link ms-3 my-1" href="#AI-2">AI-2</a> 
                    </nav> 
                </nav> 
            </nav> 
        </div> 
  
        <div class="col-8"> 
            <h1 class="text-success">GeeksforGeeks</h1> 
            <strong>Scrollspy in Bootstrap 5 via Javascript</strong>  
            <br /> 
              
            <div> 
                <div id="CS"> 
                    <h4>CS</h4> 
                    <p> 
                        GeeksforGeeks is a one-stop destination for  
                        Computer Science students. Computer Science  
                        is a huge field, thus students must select  
                        a suitable platform that can meet all their  
                        needs, including Tutorials & Courses, Placement  
                        Preparation, and Interview Experiences, among 
                        others.GeeksforGeeks is a one-stop destination  
                        for Computer Science students.Computer Science  
                        is a huge field, thus students must select a 
                        suitable platform that can meet all their  
                        needs,including Tutorials & Courses, Placement  
                        Preparation, and Interview Experiences, among  
                        others. 
                    </p> 
                </div> 
                <div id="CS-1"> 
                    <h5>CS-1</h5> 
                    <p> 
                        GeeksforGeeks is a one-stop destination for  
                        Computer Science students. Computer Science  
                        is a huge field, thus students must select  
                        a suitable platform that can meet all their  
                        needs, including Tutorials & Courses, Placement  
                        Preparation, and Interview Experiences, among 
                        others.GeeksforGeeks is a one-stop destination  
                        for Computer Science students.Computer Science  
                        is a huge field, thus students must select a 
                        suitable platform that can meet all their  
                        needs,including Tutorials & Courses, Placement  
                        Preparation, and Interview Experiences, among  
                        others. 
                    </p> 
                </div> 
                <div id="CS-2"> 
                    <h5>CS-2</h5> 
                    <p> 
                        GeeksforGeeks is a one-stop destination for  
                        Computer Science students. Computer Science  
                        is a huge field, thus students must select  
                        a suitable platform that can meet all their  
                        needs, including Tutorials & Courses, Placement  
                        Preparation, and Interview Experiences, among 
                        others.GeeksforGeeks is a one-stop destination  
                        for Computer Science students.Computer Science  
                        is a huge field, thus students must select a 
                        suitable platform that can meet all their  
                        needs,including Tutorials & Courses, Placement  
                        Preparation, and Interview Experiences, among  
                        others. 
                    </p> 
                </div> 
                <div id="IT">IT 
                    <h4>IT</h4> 
                    <p> 
                        GeeksforGeeks is a one-stop destination for  
                        Computer Science students. Computer Science  
                        is a huge field, thus students must select  
                        a suitable platform that can meet all their  
                        needs, including Tutorials & Courses, Placement  
                        Preparation, and Interview Experiences, among 
                        others.GeeksforGeeks is a one-stop destination  
                        for Computer Science students.Computer Science  
                        is a huge field, thus students must select a 
                        suitable platform that can meet all their  
                        needs,including Tutorials & Courses, Placement  
                        Preparation, and Interview Experiences, among  
                        others. 
                    </p> 
                </div> 
                <div id="AI"> 
                    <h4>AI</h4> 
                    <p> 
                        GeeksforGeeks is a one-stop destination for  
                        Computer Science students. Computer Science  
                        is a huge field, thus students must select  
                        a suitable platform that can meet all their  
                        needs, including Tutorials & Courses, Placement  
                        Preparation, and Interview Experiences, among 
                        others.GeeksforGeeks is a one-stop destination  
                        for Computer Science students.Computer Science  
                        is a huge field, thus students must select a 
                        suitable platform that can meet all their  
                        needs,including Tutorials & Courses, Placement  
                        Preparation, and Interview Experiences, among  
                        others. 
                    </p> 
                </div> 
                <div id="AI-1"> 
                    <h5>AI-1</h5> 
                    <p> 
                        GeeksforGeeks is a one-stop destination for  
                        Computer Science students. Computer Science  
                        is a huge field, thus students must select  
                        a suitable platform that can meet all their  
                        needs, including Tutorials & Courses, Placement  
                        Preparation, and Interview Experiences, among 
                        others.GeeksforGeeks is a one-stop destination  
                        for Computer Science students.Computer Science  
                        is a huge field, thus students must select a 
                        suitable platform that can meet all their  
                        needs,including Tutorials & Courses, Placement  
                        Preparation, and Interview Experiences, among  
                        others. 
                    </p> 
                </div> 
                <div id="AI-2"> 
                    <h5>AI-2</h5> 
                    <p> 
                        GeeksforGeeks is a one-stop destination for  
                        Computer Science students. Computer Science  
                        is a huge field, thus students must select  
                        a suitable platform that can meet all their  
                        needs, including Tutorials & Courses, Placement  
                        Preparation, and Interview Experiences, among 
                        others.GeeksforGeeks is a one-stop destination  
                        for Computer Science students.Computer Science  
                        is a huge field, thus students must select a 
                        suitable platform that can meet all their  
                        needs,including Tutorials & Courses, Placement  
                        Preparation, and Interview Experiences, among  
                        others. 
                    </p> 
                </div> 
            </div> 
        </div> 
    </div> 
  
    <script> 
        document.addEventListener("DOMContentLoaded", function () { 
            var scrollSpy = new bootstrap.ScrollSpy(document.body, { 
                target: '#nested-nav' 
            }) 
        }); 
    </script> 
</body> 
  
</html> 