Component: ScrollTo Smooth in-page navigation with active section highlighting

Basic usage

Add data-anim-scrollto to a navigation element and provide a selector of the section you want to scroll to.

<a href="#" data-anim-scrollto="#about">About</a>
<a href="#" data-anim-scrollto="#services">Services</a>
<a href="#" data-anim-scrollto="#contacts">Contacts</a>

Target section

The selector used inside data-anim-scrollto must exist on the page.

<section id="about">
   About section
</section>

Fixed header offset

If your website uses a fixed header, add the attribute data-anim-scrollto-header to prevent the section from appearing under the header.

<a
   href="#"
   data-anim-scrollto="#services"
   data-anim-scrollto-header
>
   Services
</a>

Scroll speed

Control scroll animation duration using data-anim-scrollto-speed. Value is defined in milliseconds.

<a
   href="#"
   data-anim-scrollto="#about"
   data-anim-scrollto-speed="800"
>
   About
</a>

Additional offset

Add extra spacing above the target block using data-anim-scrollto-top.

<a
   href="#"
   data-anim-scrollto="#contacts"
   data-anim-scrollto-top="100"
>
   Contacts
</a>

Active navigation highlighting

To enable automatic highlighting of the current section, add data-anim-watcher="navigator" to the section elements.

<a data-anim-scrollto="#about">About</a>

<section
   id="about"
   data-anim-watcher="navigator"
>
   ...
</section>

When the section becomes visible, the corresponding navigation element receives the class:

Download

Use ScrollTo to create smooth navigation experiences, highlight active sections automatically, and eliminate default anchor jump behavior.