Scrollto

Docs

Scrollto

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

Examples

Basic Usage

Smoothly scroll to a specific element within a scrollable container.

<div
  class="kt-scrollable overflow-y-auto w-full border border-border p-6 rounded-lg text-center h-[300px]"
  id="scrollable"
>
  <div class="h-10"></div>
  <button
    class="kt-btn"
    id="scrollto_one"
    data-kt-scrollto="#scrollto_two"
    data-kt-scrollto-parent="#scrollable"
  >
    Scroll to element<svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-arrow-down size-4"
      aria-hidden="true"
    >
      <path d="M12 5v14"></path>
      <path d="m19 12-7 7-7-7"></path>
    </svg>
  </button>
  <div class="h-[5000px]"></div>
  <button
    class="kt-btn"
    id="scrollto_two"
    data-kt-scrollto="#scrollto_one"
    data-kt-scrollto-parent="#scrollable"
    data-kt-scrollto-offset="-100px"
  >
    Scroll back<svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-arrow-up size-4"
      aria-hidden="true"
    >
      <path d="m5 12 7-7 7 7"></path>
      <path d="M12 19V5"></path>
    </svg>
  </button>
</div>

Scroll To Target

Smoothly scroll to top of the page.

<div class="space-y-5">
  <div class="text-center">
    <button id="top" class="kt-btn" data-kt-scrollto="#bottom">
      Scroll to bottom<svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-arrow-down size-4"
        aria-hidden="true"
      >
        <path d="M12 5v14"></path>
        <path d="m19 12-7 7-7-7"></path>
      </svg>
    </button>
  </div>
  <div class="h-[1000px]"></div>
  <div class="text-center">
    <button
      id="bottom"
      class="kt-btn"
      data-kt-scrollto="#top"
      data-kt-scrollto-offset="-50px"
    >
      Scroll to top<svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-arrow-up size-4"
        aria-hidden="true"
      >
        <path d="m5 12 7-7 7 7"></path>
        <path d="M12 19V5"></path>
      </svg>
    </button>
  </div>
</div>

Component API

Options

These data attributes allow you to set options for the scrollto component during auto initialization.

Option	Type	Default	Description
`data-kt-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. E.g: ~~#parent_element_id~~ .
`data-kt-scrollto-target`

Selectors

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, ~~#element_id~~ , for a target element.

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-kt-scrollto~~ attribute or ~~target~~ configuration option.
`getOption(name)`	Retrieves the value of a configuration option by parameter from a KTScrollto instance.

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

Utilities

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 ~~data-kt-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 .

// Initialize all scrolltos
KTScrollto.init();
 
// Initialzie pending scrolltos
KTScrollto.createInstances();
 
// Get scrollto object
const scrolltoEl = document.querySelector('#my_scrollto');
const scrollto = KTScrollto.getInstance(scrolltoEl);

PreviouseScrollspy NextSelect

On This Page

Examples
- Basic Usage
- Scroll To Target
Component API