bootstrap
  1. bootstrap-scrollspy
PreviousNext

Bootstrap Scrollspy

Bootstrap Scrollspy is a plugin that tracks the scrolling of a web page and highlights the active section in the navbar. This is useful for long webpages with multiple sections that require navigation.

Syntax

To use Scrollspy in your HTML file, you need to add the data-spy and data-target attributes to the navbar and the section divs. The data-spy attribute should be set to "scroll" and the data-target attribute should be set to the ID of the navbar.

<nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link" href="#scrollspyHeading1">First</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#scrollspyHeading2">Second</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#scrollspyHeading3">Third</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#scrollspyHeading4">Fourth</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#scrollspyHeading5">Fifth</a>
        </li>

    </ul>
</nav>
<div style="height: 100px;" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%"
    data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
    <h4 id="scrollspyHeading1">First heading</h4>
    <p>...</p>
    <h4 id="scrollspyHeading2">Second heading</h4>
    <p>...</p>
    <h4 id="scrollspyHeading3">Third heading</h4>
    <p>...</p>
    <h4 id="scrollspyHeading4">Fourth heading</h4>
    <p>...</p>
    <h4 id="scrollspyHeading5">Fifth heading</h4>
    <p>...</p>
</div>

Example

Here is an example of how to use Scrollspy in the navbar

<nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link" href="#scrollspyHeading1">First</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#scrollspyHeading2">Second</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#scrollspyHeading3">Third</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#scrollspyHeading4">Fourth</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#scrollspyHeading5">Fifth</a>
        </li>

    </ul>
</nav>
<div style="height: 100px;" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%"
    data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
    <h4 id="scrollspyHeading1">First heading</h4>
    <p>...</p>
    <h4 id="scrollspyHeading2">Second heading</h4>
    <p>...</p>
    <h4 id="scrollspyHeading3">Third heading</h4>
    <p>...</p>
    <h4 id="scrollspyHeading4">Fourth heading</h4>
    <p>...</p>
    <h4 id="scrollspyHeading5">Fifth heading</h4>
    <p>...</p>
</div>
Try Playground

Nested nav

Scrollspy also works with nested .navs. If a nested .nav is .active, its parents will also be .active. Scroll the area next to the navbar and watch the active class change.

<div class="row">
    <div class="col-4">
        <nav style="position: fixed;" id="navbar-example3"
            class="h-100 flex-column align-items-stretch pe-4 border-end">
            <nav class="nav nav-pills flex-column">
                <a class="nav-link" href="#item-1">Item 1</a>
                <nav class="nav nav-pills flex-column">
                    <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
                    <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
                </nav>
                <a class="nav-link" href="#item-2">Item 2</a>
                <a class="nav-link" href="#item-3">Item 3</a>
                <nav class="nav nav-pills flex-column">
                    <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
                    <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
                </nav>
            </nav>
        </nav>
    </div>

    <div class="col-8">
        <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true"
            class="scrollspy-example-2" tabindex="0">
            <div id="item-1">
                <h4>Item 1</h4>
                <p>...</p>
            </div>
            <div id="item-1-1">
                <h5>Item 1-1</h5>
                <p>...</p>
            </div>
            <div id="item-1-2">
                <h5>Item 1-2</h5>
                <p>...</p>
            </div>
            <div id="item-2">
                <h4>Item 2</h4>
                <p>...</p>
            </div>
            <div id="item-3">
                <h4>Item 3</h4>
                <p>...</p>
            </div>
            <div id="item-3-1">
                <h5>Item 3-1</h5>
                <p>...</p>
            </div>
            <div id="item-3-2">
                <h5>Item 3-2</h5>
                <p>...</p>
            </div>
        </div>
    </div>
</div>
Try Playground

List group

Scrollspy also works with .list-groups. Scroll the area next to the list group and watch the active class change.

<div class="row">
  <div class="col-4">
    <div id="list-example" class="list-group">
      <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
      <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
      <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
      <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
    </div>
  </div>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
      <h4 id="list-item-1">Item 1</h4>
      <p>...</p>
      <h4 id="list-item-2">Item 2</h4>
      <p>...</p>
      <h4 id="list-item-3">Item 3</h4>
      <p>...</p>
      <h4 id="list-item-4">Item 4</h4>
      <p>...</p>
    </div>
  </div>
</div>
Try Playground

Explanation

In the code above, we used the following attributes and classes to enable Scrollspy:

  • data-spy="scroll": this attribute is added to the navbar to tell Bootstrap to enable Scrollspy.
  • data-target="#navbarNav": this attribute is added to the navbar to tell Scrollspy which navbar to track.
  • href="#scrollspyHeading1": this attribute is added to the navbar links to tell Scrollspy which section to highlight.
  • id="scrollspyHeading1": this attribute is added to the section divs to create a unique identifier for each section.

Use

Scrollspy can be used in conjunction with the navbar to create a more user-friendly web page. It allows users to quickly navigate to specific sections without having to scroll through the entire web page.

Important Points

  • Scrollspy is a plugin that tracks the scrolling of a web page and highlights the active section in the navbar.
  • To use Scrollspy, you need to add the data-spy and data-target attributes to the navbar and the section divs.
  • Scrollspy is useful for long webpages with multiple sections that require navigation.

Summary

Bootstrap Scrollspy is a useful plugin for long webpages with multiple sections that require navigation. It allows users to quickly and easily navigate to specific sections of the web page without having to scroll through the entire page. By following the syntax and using the appropriate attributes and classes, you can easily implement Scrollspy in your web page.

TooltipsForms
Published on: