KTUIKTUI
KTUIKTUI
ComponentsDocsStudio

Getting Started

IntroductionInstallationApproachThemingJavaScriptTypeScriptDark modeRTLReferencesChangelog - v1.2.4Metronic TemplatePopular

Components

AccordionAvatarAlertBadgeBreadcrumbButtonCardCarouselNewClipboardNewCheckboxCollapseDatatableUpdateContext MenuNewDismissDrawerDropdownImage InputInputKbdLinkModalPaginationPin inputNewProgressRadio GroupRange SliderNewRatingNewReparentRepeaterNewScrollableScrollspyScrolltoSelectSeparatorSkeletonStepperStickySwitchTabsTextareaTheme SwitchToastTooltipToggleToggle GroupToggle PasswordTooltip
©2026 KtUI. All rights reserved.
A project by Keenthemes
Docs
Scrollto

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.

OptionTypeDefaultDescription
data-kt-scrollto-parentstring"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.

NameDescription
Data Attributes
data-kt-scrolltoUsed 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.

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

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

TypeScript

Import the component and types from @keenthemes/ktui for typed options and instance:

import {
  KTScrollto,
  type KTScrolltoConfigInterface,
  type KTScrolltoInterface,
} from '@keenthemes/ktui';
 
const scrolltoEl = document.querySelector<HTMLElement>('#my_scrollto');
if (!scrolltoEl) return;
 
const scrollto: KTScrolltoInterface | null = KTScrollto.getInstance(scrolltoEl);
if (scrollto) scrollto.scroll();
 
const options: KTScrolltoConfigInterface = {};
const instance: KTScrolltoInterface = new KTScrollto(scrolltoEl, options);
PreviouseScrollspyNextSelect

On This Page

  • Examples
    • Basic Usage
    • Scroll To Target
  • Component API
    • Options
    • Selectors
    • Methods
    • Utilities
  • TypeScript
string
-
Specifies the target element to apply the scroll effect. When activated, the scroll behavior will be handled within this container. For example: #target_element_id .
data-kt-scrollto-smoothbooleantrueEnables or disables smooth scrolling. If set to true , the scrolling will be animated smoothly to the target element.
data-kt-scrollto-offsetnumber0Specifies 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.
name
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.
();
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.