Smoothscroll plain js plus#

We keep adding some more example copy here to emphasize the scrolling and highlighting. It's repeated throughout the component example. Note that as you scroll down the page, the appropriate navigation link is highlighted. This is some placeholder content for the scrollspy page. Scrollspy is not limited to nav components and list groups, so it will work on any anchor elements in the current document.

Scroll the area next to the list group and watch the active class change. Item 1 Item 1-1 Item 1-2 Item 2 Item 3 Item 3-1 Item 3-2 Item 1. Scroll the area next to the navbar and watch the active class change. Navbar First Second Dropdown Third Fourth Fifth First heading.

Open the dropdown menu and watch the dropdown items be highlighted as well. Scroll the area below the navbar and watch the active class change. See the Non-visible elements section below. Target elements that are not visible will be ignored. For example, a home must correspond to something in the DOM like

Links must have resolvable id targets, otherwise they’re ignored. active class is added and removed from anchor links within the associated navigation. Be sure to also include a tabindex='0' to ensure keyboard access.Īs you scroll the “spied” container, an. On the scrollable container, add data-bs-spy='scroll' and data-bs-target='#navId' where navId is the unique id of the associated navigation. The scrollable container can be the or a custom element with a set height and overflow-y: scroll.

Smoothscroll plain js plus#

To start, scrollspy requires two things: a navigation, list group, or a simple set of links, plus a scrollable container. Scrollspy is best used in conjunction with a Bootstrap nav component or list group, but it will also work with any anchor elements in the current page. active class on anchor ( ) elements when the element with the id referenced by the anchor’s href is scrolled into view.