How to use Scrollspy in Bootstrap 5 via JavaScript ?

Last Updated : 01 Aug, 2024

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/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" 
        crossorigin="anonymous" />
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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:

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/[email protected]/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity=
"sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" 
        crossorigin="anonymous" />

    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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>