Preview Purchase
Navigation

Tailwind CSS Scrollto

The Tailwind CSS ScrollTo component enables smooth scrolling transitions to specific elements on the page, enhancing user navigation.

Basic Usage

Smoothly scroll to a specific element within a scrollable container.
Preview HTML
Example target content.

To Top

Smoothly scroll to top of the page.
Preview HTML

To Footer

Smoothly scroll to footer of the page.
Preview HTML

Source Code

The following source file manages the JavaScript behavior of the Tailwind CSS Stepper component. Upon building the assets using Webpack Build Tools , the below file is compiled and added into the dist/assets/js/core.bundle.js bundle, making it available globally across all pages.
File Description
src/core/components/stepper/stepper.ts The TypeScript source file that manages the JavaScript behavior of the Tailwind CSS Stepper component.

Data Attribute Initialization

Auto-initialize all KTScrollto instances on page load by adding the data-scrollto="#element_id" attribute to your scrollto element. This triggers on the fly initialization by the KTScrollto JavaScript component. 
				
					<button class="btn btn-light" data-scrollto="#scrollto_1" data-scrollto-parent="body" id="my_scrollto">
 Scroll to an element
 <i class="ki-outline ki-black-down">
 </i>
</button>
These attributes allow you to set options for the KTScrollto component during initialization. The values you provide as strings are automatically converted to the appropriate KTScrollto Options .
HTML Attribute Type Default Description
data-scrollto string - Used to auto-initialize KTScrollto instances on page load and provides a string value serving as an ID selector, #element_id , for a target element. Alternatively, you can remove it and perform initialization using JavaScript.
data-scrollto-parent string "body" 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.
data-scrollto-smooth boolean true Enables or disables smooth scrolling. If set to true , the scrolling will be animated smoothly to the target element.
data-scrollto-offset number 0 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.

JavaScript Initialization

To initialize a new scrollto component, pass the corresponding DOM element and configuration options to the KTScrollto class constructor.
JavaScript HTML 
				
					const scrolltoEl = document.querySelector('#my_scrollto');
const options = {
	smooth: true,
	parent: 'body',
	target: '#my_element',
	offset: 20,
};

const scrollto = new KTScrollto(scrolltoEl, options);

To initialize the scrollto with JavaScript, use data-scrollto="false" attribute instead. This prevents automatic initialization on page load.

Options

This table outlines the configuration options for initialization of Tailwind CSS Scrollto instances, using the KTScrollto JavaScript component.
Option Type Default Description
target string - Specifies the selector of the element to be scrolled to. This string should match the ID #element_id of the target element in the DOM, enabling the scroll functionality to precisely locate and move to the specified section of the page.
parent string "body" 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.
smooth boolean true Enables or disables smooth scrolling. If set to true , the scrolling will be animated smoothly to the target element.
offset number 0 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.

Utilities

Manage and interact with KTScrollto instances using these static methods of KTScrollto class.
Method Description
init() Automatically initializes KTScrollto object for all elements with the data-scrollto="true" attribute on page load.
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 KTScrollto object associated with the given DOM element element .
getOrCreateInstance(element) Returns the existing KTScrollto object for the provided DOM element element , or creates a new instance if none exists, then returns the same.
JavaScript HTML 
				
					// Initialize all scrolltos
KTScrollto.init()

// Initialzie pending scrolltos
KTScrollto.createInstances();

// Get scrollto object
const scrolltoEl = document.querySelector('#my_scrollto');
const scrollto = KTScrollto.getInstance(scrolltoEl);

Methods

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 element and configuration options .
scroll() Initiates a scroll action to the target element defined by the data-scrollto attribute or target configuration option.
getOption(name) Retrieves the value of a configuration option by name parameter from a KTScrollto instance.
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.
JavaScript HTML 
				
					const scrolltoEl = document.querySelector('#my_scrollto');
const scrollto = KTScrollto.getInstance(scrolltoEl);

scrollto.scroll();
Previous Scrollspy Next Stepper