Scrollspy

Highlights the navigation link of the section scrolled into view.

Bootstrap’s scrollspy docs describe the markup and CSS.

Example

Put bsScrollspy on the element that holds the sections and pass it the element that holds the links. Each link’s href is # and a section id. The active link gets .active and aria-current="true". Clicking a link scrolls to its section without leaving the page; add smoothScroll to animate it.

Section one

This is some placeholder content for the scrollspy page. As you scroll, the navigation highlights the section in view. Keep scrolling to see more sections.

Scrollspy uses an activation line near the top of the scroll area. The last section whose top has passed it is the active one.

Section two

This is some placeholder content for the scrollspy page. As you scroll, the navigation highlights the section in view. Keep scrolling to see more sections.

Scrollspy uses an activation line near the top of the scroll area. The last section whose top has passed it is the active one.

Section three

This is some placeholder content for the scrollspy page. As you scroll, the navigation highlights the section in view. Keep scrolling to see more sections.

Scrollspy uses an activation line near the top of the scroll area. The last section whose top has passed it is the active one.

Section four

This is some placeholder content for the scrollspy page. As you scroll, the navigation highlights the section in view. Keep scrolling to see more sections.

Scrollspy uses an activation line near the top of the scroll area. The last section whose top has passed it is the active one.

Active section:

<div class="row">
  <div class="col-4">
    <nav #toc bsNav variant="pills" vertical aria-label="Sections">
      <a bsNavLink current="true" href="#spy-one">One</a>
      <a bsNavLink current="true" href="#spy-two">Two</a>
      <a bsNavLink current="true" href="#spy-three">Three</a>
      <a bsNavLink current="true" href="#spy-four">Four</a>
    </nav>
  </div>
  <div class="col-8">
    <div
      [bsScrollspy]="toc"
      smoothScroll
      (activate)="active.set($event)"
      class="overflow-y-auto position-relative"
      style="height: 240px"
      tabindex="0"
      role="region"
      aria-label="Scrollspy content">
      @for (section of ['one', 'two', 'three', 'four']; track section) {
        <section [id]="`spy-${section}`" class="mb-4">
          <h3 class="h5 text-capitalize">Section {{ section }}</h3>
          <p>
            This is some placeholder content for the scrollspy page. As you scroll, the navigation
            highlights the section in view. Keep scrolling to see more sections.
          </p>
          <p>
            Scrollspy uses an activation line near the top of the scroll area. The last section
            whose top has passed it is the active one.
          </p>
        </section>
      }
    </div>
  </div>
</div>
<p class="mt-2 mb-0">Active section: {{ active() }}</p>

API

BsScrollspy

Selector: [bsScrollspy] · Exported as: bsScrollspy

Inputs

Name	Type	Default	Description
`bsScrollspy`	`HTMLElement`	`required`	The element holding the links.
`topMargin`	`string`	`'12%'`	Position of the activation line, as a percentage or in pixels.
`smoothScroll`	`boolean`	`false`	Scrolls smoothly to a section when its link is clicked.

Outputs

Name	Type	Description
`activate`	`string`	Emits the id of each section that becomes active.

Methods

Name	Type	Description
`refresh()`	`void`	Finds the links and sections again.
`activeId`	`Signal<string \| null>`	Id of the active section.