Animated scroll to

This module creates an animated scroll to elements.

Single and multiple hashes in the URL are allowed. This are some correct URLs:

• example.com#scrollToMe
• example.com#scrollToMe#AndToMe
• example.com#scrollToMe#AndToMe#AlsoToMe

The scroll speed, pause, correction and easing can be set per element (see below).

Default settings can be set on /admin/config/animate-scroll-to/settings

The settings can be overridden per element with the following attributes:

• data-scroll-speed

(value in milliseconds, standard default is 600)

• data-scroll-pause

(value in milliseconds, standard default is 3000)

• data-scroll-correction

(value in pixels, standard default is 0)

• data-scroll-easing

(value as string, standard default is 'swing')

For example:

<p id="scrollToMe" data-scroll-speed="400" data-scroll-pause="8000" data-scroll-correction="150" data-scroll-easing="linear">
Hello world!
</p>
<p id="AndToMe" data-scroll-speed="300" data-scroll-pause="6000" data-scroll-correction="100" data-scroll-easing="swing">
Hello world!
</p>
<p id="AlsoToMe" data-scroll-speed="200" data-scroll-pause="4000" data-scroll-correction="200" data-scroll-easing="linear">
Hello world!
</p>

Since 8.x-1.0-alpha3 states are added to the elements through data attributes:

• [data-scroll-state="will-become-active"] -> When the element will become active sometime.
• [data-scroll-state="is-becoming-active"] -> When the page is scrolling to the element.
• [data-scroll-state="is-active"] -> When the scrolling has been stopped and it is the current element.
• [data-scroll-state="was-active"] -> When the element was visible earlier while scrolling.

Drupal 9

The module is tested in Drupal 9. If you have trouble using this module in Drupal 9, please create an issue in the issue queue.

Drupal 10

The module is tested in Drupal 10. If you have trouble using this module in Drupal 10, please create an issue in the issue queue.

Drupal 11

The module is tested in Drupal 11. If you have trouble using this module in Drupal 11 please create an issue in the issue queue.