The Tailwind ScrollTo component enables smooth scrolling transitions to specific elements on the page, enhancing user navigation.
Smoothly scroll to a specific element within a scrollable container.
Smoothly scroll to top of the page.
These data attributes allow you to set options for the scrollto component during auto initialization.
| Option | Type | Default | Description |
|---|---|---|---|
data-kt-scrollto-parent | Defines the parent element to which the scroll will be applied. When scrolling, the specified element will be the container that handles the scroll behavior. E.g: | ||
data-kt-scrollto-target | Specifies the target element to apply the scroll effect. When activated, the scroll behavior will be handled within this container. For example: | ||
data-kt-scrollto-smooth | Enables or disables smooth scrolling. If set to | ||
data-kt-scrollto-offset | Specifies an offset to be applied when scrolling to the target element. This is useful for adjusting the scroll position, especially if there are fixed elements at the top of the page. |
This table details the custom classes and data attributes used by the scrollto component.
| Name | Description |
|---|---|
| Data Attributes | |
data-kt-scrollto | Used to auto-initialize KTScrollto instances on page load and provides a string value serving as an ID selector, |
Use KTScrollto component's API methods to programmatically control its behavior.
| Method | Description |
|---|---|
new KTScrollto(element, options) | Creates an object instance of KTScrollto class for the given DOM |
scroll() | Initiates a scroll action to the target element defined by the |
getOption(name) | Retrieves the value of a configuration option by |
getElement() | Retrieves the DOM element linked to a specific KTScrollto instance. |
dispose() | Removes the KTScrollto instance from an element, including any associated data stored on the DOM element. |
// Selects element with ID 'my_scrollto'
const scrolltoEl = document.querySelector('#my_scrollto');
// Gets existing KTScrollto instance for scrolltoEl
const scrollto = KTScrollto.getInstance(scrolltoEl);
// Creates new KTScrollto instance with options
const scrollto2 = new KTScrollto(scrolltoEl, {
// Enables smooth scrolling
smooth: true,
// Sets 'body' as parent container
parent: 'body',
// Target element to scroll to
target: '#my_element',
// Adds 20px offset
offset: 20,
});
// Triggers scroll to target
scrollto.scroll();
scrollto2.scroll();Manage and interact with KTScrollto instances using these static methods of KTScrollto JavaScript class.
| Method | Description |
|---|---|
init() | Automatically initializes KTScrollto object for all elements with the |
createInstances() | Allows to create KTScrollto instances for all elements that have been dynamically added to the DOM but haven't been activated yet. |
getInstance(element) | Returns the |
getOrCreateInstance(element) | Returns the existing |
// Initialize all scrolltos
KTScrollto.init()
// Initialzie pending scrolltos
KTScrollto.createInstances();
// Get scrollto object
const scrolltoEl = document.querySelector('#my_scrollto');
const scrollto = KTScrollto.getInstance(scrolltoEl);