Open In App

Bootstrap 5 Scrollspy Via data Attributes

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Scrollspy Via data attributes facilitate adding the scrollspy behavior in the navigation. This will only work if we add the data-bs-spy attribute to the element that is to spy, along with including the data-bs-target attribute, specifying the id or class name of the parent element of the div container or the nav component.

Bootstrap 5 Scrollspy Via data attributes:

  • data-bs-spy: This attribute’s job is to specify the element which will be spied on, i.e., the element which will be scrolled to.
  • data-bs-target: This attribute’s job is to specify the id or class of the element the buttons or links on which will be clicked on to scroll.

Syntax:

<body data-bs-spy="scroll" 
      data-bs-target="selectorID/selectorCLASS">
     ...
</body>

Example 1: The below code example demonstrates how we can implement the Scrollspy using Data Attributes in a Navbar.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link href=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script>
        $(function () {
            $('#work').on('activate.bs.scrollspy')
        });
    </script>
</head>
  
<body>
    <h1 class="m-4 text-success">
        GeeksforGeeks
    </h1>
    <h4 class="ms-4">Bootstrap 5 Scrollspy Via data attributes
    </h4>
    <div class="container">
        <nav id="navbar-example2" 
             class="navbar navbar-light 
                    bg-light px-3 m-4">
            <a class="navbar-brand" 
               href="#">
                Navbar
            </a>
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link" 
                        href="#scrollspyHeading1">
                            DS
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" 
                        href="#scrollspyHeading2">
                            Algorithms
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" 
                        href="#scrollspyHeading3">
                            C++
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" 
                        href="#scrollspyHeading4">
                            BootStrap 5
                    </a>
                </li>
            </ul>
        </nav>
        <div class="container" 
             data-bs-spy="scroll" 
             data-bs-target="#navbar-example2" 
             data-bs-offset="0"
             class="scrollspy-example" 
             tabindex="0">
            <h4 id="scrollspyHeading1">
                Data Structures            
            </h4>
            <p>
               A data structure is a group of data elements that 
               provides the easiest way to store and perform 
               different actions on the data of the computer.
               A data structure is a particular way of organizing
               data in a computer so that it can be used effectively.
               The idea is to reduce the space and time complexities
               of different tasks. The choice of a good data structure 
               makes it possible to perform a variety of critical 
               operations effectively. An efficient data structure
               also uses minimum memory space and execution time to 
               process the structure.
            </p>
            <h4 id="scrollspyHeading2">
                Algorithms                
            </h4>
            <p>
               The word Algorithm means ” A set of finite rules or 
               instructions to be followed in calculations or other 
               problem-solving operations” Or ” A procedure for 
               solving a mathematical problem in a finite number 
               of steps that frequently involves recursive 
               operations”.It can be understood by taking the 
               example of cooking a new recipe. To cook a new recipe,
               one reads the instructions and steps and executes them
               one by one, in the given sequence. The result thus 
               obtained is the new dish is cooked perfectly. Every
               time you use your phone, computer, laptop, or calculator
               you are using Algorithms.
            </p>
            <h4 id="scrollspyHeading3">
                C++                
            </h4>
            <p>
                C++ is a general-purpose programming language and
                is widely used nowadays for competitive programming. 
                It has imperative, object-oriented and generic 
                programming features. C++ runs on lots of platforms
                like Windows, Linux, Unix, Mac etc.C++ is a 
                general-purpose programming language that was 
                developed as an enhancement of the C language
                to include object-oriented paradigm. It is an
                imperative and a compiled language.C++ is a 
                middle-level language rendering it the advantage
                of programming low-level(drivers, kernels) and 
                even higher-level applications (games, GUI, desktop
                apps etc.). The basic syntax and code structure of 
                both C and C++ are the same.
            </p>
            <h4 id="scrollspyHeading4">
                BootStrap 5               
            </h4>
            <p>
               Bootstrap is a free and open-source collection of CSS and 
               JavaScript/jQuery code used for creating dynamic websites 
               layout and web applications. Bootstrap is one of the most 
               popular front-end frameworks which has really a nice set 
               of predefined CSS codes. Bootstrap uses different types of 
               classes to make responsive websites. Bootstrap 5 was
               officially released on 16 June 2020 after several 
               months of redefining its features.Bootstrap is a 
               framework that is suitable for mobile-friendly web
               development. it means the code and the template available 
               on bootstrap are applicable to various 
               screen sizes. It is responsive for every screen size.
            </p>
        </div>
    </div>
     
</body>
  
</html>


Output:

 

Example 2: This is another code example that demonstrates how we can implement the Scrollspy using Data Attributes in a Nested Side Navbar.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link href=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script>
        $(function () {
            $('#work').on('activate.bs.scrollspy')
        });
    </script>
</head>
  
<body data-spy="scroll" 
      data-target="#scrollspy" 
      data-offset="50">
    <h1 class="m-4 text-success">
        GeeksforGeeks        
    </h1>
    <h4 class="ms-4">
        Bootstrap 5 Scrollspy Via data attributes    
    </h4>
    <div class="container-fluid mt-4">
        <div class="row">
            <nav class="col-4 nav nav-pills flex-column" 
                 id="scrollspy">
                <a class="nav-link active" 
                   href="#dataStructs">
                   Data Structures
                </a>
                <a class="nav-link" 
                   href="#algo">
                   Algorithms
                </a>
                <a class="nav-link" 
                   href="#bootstrap">
                   Others
                </a>
                <nav class="nav nav-pills flex-column" 
                     id="scrollspy">
                    <a class="nav-link ms-3 my-1" 
                       href="#other">
                           Bootstrap                           
                    </a>
                    <a class="nav-link ms-3 my-1" 
                       href="#cpp">
                           C++                      
                    </a>
                </nav>
            </nav>
            <div class="col-8">
                <div id="dataStructs">
                    <h2>Data Structures</h2>
                    <p>
                       A data structure is a group of data elements that 
                       provides the easiest way to store and perform 
                       different actions on the data of the computer.
                       A data structure is a particular way of organizing
                       data in a computer so that it can be used effectively.
                       The idea is to reduce the space and time complexities
                       of different tasks. The choice of a good data structure 
                       makes it possible to perform a variety of critical 
                       operations effectively. An efficient data structure
                       also uses minimum memory space and execution time to 
                       process the structure.
                    </p>
                </div>
                <div id="algo">
                    <h2>Algorithms</h2>
                    <p>
                       The word Algorithm means ” A set of finite rules or 
                       instructions to be followed in calculations or other 
                       problem-solving operations” Or ” A procedure for 
                       solving a mathematical problem in a finite number 
                       of steps that frequently involves recursive 
                       operations”.It can be understood by taking the 
                       example of cooking a new recipe. To cook a new recipe,
                       one reads the instructions and steps and executes them
                       one by one, in the given sequence. The result thus 
                       obtained is the new dish is cooked perfectly. Every
                       time you use your phone, computer, laptop, or calculator
                       you are using Algorithms.
                    </p>
                </div>
                <div id="other">
                    <h1>Others</h1>
                </div>
                <div id="bootstrap">
                    <h2>Bootstrap</h2>
                    <p>
                       Bootstrap is a free and open-source collection of 
                       CSS and JavaScript/jQuery code used for creating 
                       dynamic websiteslayout and web applications. 
                       Bootstrap is one of the most popular front-end 
                       frameworks which has really a nice set of predefined
                       CSS codes. Bootstrap uses different types of classes 
                       to make responsive websites. Bootstrap 5 was
                       officially released on 16 June 2020 after several 
                       months of redefining its features.Bootstrap is a 
                       framework that is suitable for mobile-friendly web
                       development. it means the code and the template 
                       available on bootstrap are applicable to various 
                       screen sizes. It is responsive for every screen size.
                    </p>
                </div>
                <div id="cpp">
                    <h2>C++</h2>
                    <p>
                        C++ is a general-purpose programming language
                        and is widely used nowadays for competitive 
                        programming. It has imperative, object-oriented 
                        and generic programming features. C++ runs on 
                        lots of platforms like Windows, Linux, Unix, 
                        Mac etc.C++ is a general-purpose programming 
                        language that was developed as an enhancement of
                        the C language to include object-oriented paradigm.
                        It is an imperative and a compiled language.
                        C++ is a middle-level language rendering
                        it the advantage of programming low-level
                        (drivers, kernels) and even higher-level 
                        applications (games, GUI, desktop
                        apps etc.). The basic syntax and code 
                        structure of both C and C++ are the same.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/components/scrollspy/#via-data-attributes 



Last Updated : 13 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads