Description
The scroll pattern allows you to implement smooth scrolling towards an anchor in the page.
Documentation
The scroll pattern makes it possible to configure when and how elements should be scrolled in your page.
Examples
Scrolling when the user clicks on the link
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Duis aute irure dolor in reprehenderit in voluptate velit.
Automatically scrolling once the page loads
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Duis aute irure dolor in reprehenderit in voluptate velit.
Option reference
Scrolling can be configured through a data-pat-scroll attribute.
The available options are:
| Field | Default | Options | Description |
|---|---|---|---|
trigger |
click |
click, auto, manual |
auto means that the scrolling will happen as soon as the page loads, additional to click events. click means that the configured element needs to be clicked first. manual does only scroll when initialized via JavaScript. |
direction |
top |
top, left |
The direction in which the scrolling happens. |
selector |
CSS selector, top, bottom or self |
A CSS selector for the element which will be scrolled into view. self if it is the pat-scoll element itself. top to scroll to the very top of the scroll container, bottom to scroll to the very bottom. |
|
offset |
A number | offset in pixels to stop scrolling before the target position. Can also be a negative number. |