Scrollspy

Sizes are minified and gzip. A plugin figure includes the Bootstrap runtime that plugin imports. Shipping every plugin is `bootstrap.bundle.min.js` at 23.3 KB gzip, not the sum of these rows.
	What runs it	JavaScript
Bootstrap 5.3	Scrollspy plugin	5.7 KB gzip
This repo	scroll-target-group and :target-current	0 KB

Markup this component accepts. The full inventory is /components.json.
Avoid	Links in a closed `[popover]` menu are not scroll markers. Keep a `.scroll-marker-alias` copy next to the toggle. The polyfill does not set `aria-current`. Add it yourself if you need it announced.

Navbar

Scroll the area below the navbar and watch the current link change. Open the dropdown to see its items highlighted too.

Closed [popover] menus use display: none, so .dropdown-item fragment links are not scroll markers and the toggle never sees :target-current. Copy each href into a .scroll-marker-alias next to the toggle (aria-hidden="true", tabindex="-1") so the browser can still pick a current marker and :has(:target-current) can style the dropdown as active. While the menu is open, CSS hides the alias so the visible item becomes :target-current instead.

First heading

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

Second heading

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

Third heading

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

Fourth heading

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

Fifth heading

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

<nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3" data-polyfill-scrollspy>
  <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 dropdown">
      <button class="nav-link dropdown-toggle" type="button" command="toggle-popover" commandfor="scrollspyDropdown">Dropdown</button>
      <ul class="dropdown-menu" popover="auto" id="scrollspyDropdown">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
      </ul>
      <span class="scroll-marker-alias" aria-hidden="true">
        <a href="#scrollspyHeading3" tabindex="-1">Third</a>
        <a href="#scrollspyHeading4" tabindex="-1">Fourth</a>
        <a href="#scrollspyHeading5" tabindex="-1">Fifth</a>
      </span>
    </li>
  </ul>
</nav>
<div class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
  <h4 id="scrollspyHeading5">Fifth heading</h4>
  <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
</div>

Nested nav

Scrollspy also works with nested .navs. If a nested link is current, its parent nav-link is highlighted as well.

Item 1

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

Keep in mind that the browser picks one current scroll marker. Multiple visible targets at the same time may still look busy.

Item 1-1

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

Keep in mind that the browser picks one current scroll marker. Multiple visible targets at the same time may still look busy.

Item 1-2

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

Keep in mind that the browser picks one current scroll marker. Multiple visible targets at the same time may still look busy.

Item 2

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

Keep in mind that the browser picks one current scroll marker. Multiple visible targets at the same time may still look busy.

Item 3

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

Keep in mind that the browser picks one current scroll marker. Multiple visible targets at the same time may still look busy.

Item 3-1

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

Keep in mind that the browser picks one current scroll marker. Multiple visible targets at the same time may still look busy.

Item 3-2

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

Keep in mind that the browser picks one current scroll marker. Multiple visible targets at the same time may still look busy.

<div class="row">
  <div class="col-4">
    <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
      <nav class="nav nav-pills flex-column" data-polyfill-scrollspy>
        <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 class="scrollspy-example-2" tabindex="0">
      <div id="item-1">
        <h4>Item 1</h4>
        <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
        <p>Keep in mind that the browser picks one current scroll marker. Multiple visible targets at the same time may still look busy.</p>
      </div>
      <div id="item-1-1">
        <h5>Item 1-1</h5>
        <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
        <p>Keep in mind that the browser picks one current scroll marker. Multiple visible targets at the same time may still look busy.</p>
      </div>
      <div id="item-1-2">
        <h5>Item 1-2</h5>
        <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
        <p>Keep in mind that the browser picks one current scroll marker. Multiple visible targets at the same time may still look busy.</p>
      </div>
      <div id="item-2">
        <h4>Item 2</h4>
        <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
        <p>Keep in mind that the browser picks one current scroll marker. Multiple visible targets at the same time may still look busy.</p>
      </div>
      <div id="item-3">
        <h4>Item 3</h4>
        <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
        <p>Keep in mind that the browser picks one current scroll marker. Multiple visible targets at the same time may still look busy.</p>
      </div>
      <div id="item-3-1">
        <h5>Item 3-1</h5>
        <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
        <p>Keep in mind that the browser picks one current scroll marker. Multiple visible targets at the same time may still look busy.</p>
      </div>
      <div id="item-3-2">
        <h5>Item 3-2</h5>
        <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
        <p>Keep in mind that the browser picks one current scroll marker. Multiple visible targets at the same time may still look busy.</p>
      </div>
    </div>
  </div>
</div>

List group

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

Item 1 Item 2 Item 3 Item 4

Item 1

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

Item 2

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

Item 3

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

Item 4

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

<div class="row">
  <div class="col-4">
    <div id="list-example" class="list-group" data-polyfill-scrollspy>
      <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 class="scrollspy-example" tabindex="0">
      <h4 id="list-item-1">Item 1</h4>
      <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
      <h4 id="list-item-2">Item 2</h4>
      <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
      <h4 id="list-item-3">Item 3</h4>
      <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
      <h4 id="list-item-4">Item 4</h4>
      <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
    </div>
  </div>
</div>

Simple anchors

Scrollspy is not limited to nav components and list groups. Any fragment link in a data-polyfill-scrollspy group works.

Item 1 Item 2 Item 3 Item 4 Item 5

Item 1

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

Item 2

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

Item 3

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

Item 4

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

Item 5

This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.

<div class="row">
  <div class="col-4">
    <div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center" data-polyfill-scrollspy>
      <a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
      <a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
      <a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
      <a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
      <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
    </div>
  </div>
  <div class="col-8">
    <div class="scrollspy-example" tabindex="0">
      <h4 id="simple-list-item-1">Item 1</h4>
      <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
      <h4 id="simple-list-item-2">Item 2</h4>
      <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
      <h4 id="simple-list-item-3">Item 3</h4>
      <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
      <h4 id="simple-list-item-4">Item 4</h4>
      <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
      <h4 id="simple-list-item-5">Item 5</h4>
      <p>This is some placeholder content for the scrollspy page. As the area scrolls, the matching navigation link is highlighted. The same paragraph is repeated so the scroller is long enough to move the highlight from heading to heading.</p>
    </div>
  </div>
</div>

Documentation

How it works

Navbar

First heading

Second heading

Third heading

Fourth heading

Fifth heading

Nested nav

Item 1

Item 1-1

Item 1-2

Item 2

Item 3

Item 3-1

Item 3-2

List group

Item 1

Item 2

Item 3

Item 4

Simple anchors

Item 1

Item 2

Item 3

Item 4

Item 5

Accessibility

Browser support