Metronic - Tailwind CSS Scrollto

Smoothly scroll to a specific element within a scrollable container.

Example target content.

				
					<div class="text-center scrollable-y w-full border p-10 rounded-lg h-[300px]" id="scrollable">
 <button class="btn btn-light" data-scrollto="#scrollto_1" data-scrollto-parent="#scrollable" id="scrollto_2">
  Scroll to an element
  <i class="ki-outline ki-black-down">
  </i>
 </button>
 <div class="h-[5000px]">
 </div>
 <div class="border border-warning bg-warning-light rounded-lg p-4 mb-10" id="scrollto_1">
  Example target content.
 </div>
 <button class="btn btn-light" data-scrollto="#scrollto_2" data-scrollto-offset="-20px" data-scrollto-parent="#scrollable">
  Scroll back
  <i class="ki-outline ki-black-up">
  </i>
 </button>
</div>

Smoothly scroll to top of the page.

Preview HTML

				
					<button class="btn btn-light" data-scrollto="body">
 Scroll to top
 <i class="ki-outline ki-black-up">
 </i>
</button>

Smoothly scroll to footer of the page.

Preview HTML

				
					<button class="btn btn-light" data-scrollto="#footer">
 Scroll to footer
 <i class="ki-outline ki-black-down">
 </i>
</button>

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.

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.

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);

				
					<button class="btn btn-light" data-scrollto="false" id="my_scrollto">
 Scroll to an element
</button>

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

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.

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);

				
					<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>

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();

				
					<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>