# Documentation v8.0.38

Preview Downloads Purchase

# Overview

ScrollTop is an exclusive component of Metronic that provides a simple build-in solution for a scroll to top button implementation. All CSS and JS requirements are bundled globally by default.

# Usage

ScrollTop's script bundles are globally included in all pages.

    <link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
    <script src="assets/js/scripts.bundle.js"></script>

# Initialization

- ScrollTop's CSS and Javascript files are globally initialized and added into our script bundle.
- Add `.scrolltop`css class and `data-kt-scrolltop="true"`to a HTML element to enable it.
- ScrollTop instances can also be controlled programmatically. See below for more info.

# Basic Example

Add `.scrolltop`css class `data-kt-scrolltop="true"`to any element element to enable it. However, it's best to be used with an icon as the child element.
The `.scrolltop`css class adds all necessary styling to the scrolltop element. Adding additional Bootstrap classes to scrolltop will also work accordingly to override the default css styling.
The ScrollTop component demo can be found at the lower right corner of the browser or click the button below to scroll to the top.
Click herefor more info on the options.
Tip: To add scroll top functionality to a stand-alone button or any other HTML element, add `data-kt-scrolltop="true"`only.
Scroll to top

    <!--begin::Scrolltop button-->
    <div id="kt_docs_example_basic" class="btn btn-primary" data-kt-scrolltop="true">
        Scroll to top
    </div>
    <!--end::Scrolltop button-->

# Markup Reference

Scrolltop uses HTML attributes to define the scrolltop configuration. Here are the references for each below
HTML Attribute references

Name | Type | Description
--- | --- | ---
`data-kt-scrolltop` | `mandatory` | Enables the element as a scrolltop. Accepts `true`or `false`values.
`data-kt-scrolltop-offset` | `optional` | Defines the offset value in `px`before the ScrollTop components comes into effect when scrolling from the top of the page. The `px`string is not required for this value. For example: `data-kt-scrolltop-offset="300"`.
`data-kt-scrolltop-speed` | `optional` | Defines the scrolling speed when scrolltop is clicked. Accepts a number value in `ms`. For example: `data-kt-scrolltop-speed="600"`will define that it will take about 0.6 seconds to scroll to the top of the page when clicked.

# API Methods

All Scrolltop components are initialized automatically, however the following are ScrollTop's functionality methods for more control.

Name | Description
--- | ---
Static Methods
`createInstances(DOMString selector)` | Initializes ScrollTop instances by selector. Default value of `selector`is `[data-kt-scrolltop="true"]`. This method can be used to initialize dynamicly populated ScrollTop instances(e.g: after Ajax request).
    KTScrolltop.createInstances();
`getInstance(DOMElement element)` | Get the Toggle instance created
    var scrollTopElement = document.querySelector("#kt_scrolltop_control");
    var scrollTop = KTScrolltop.getInstance(scrollTopElement);
Public Methods
`KTScrolltop(DOMElement element, Object options)` | Constructs a new instance of `KTScrolltop`class and initializes a Drawer control:
    var scrollElement = document.querySelector("#kt_scrolltop_control");
    var scrollTop = new KTScrolltop(scrollElement, {offset: 300, speed: 600});
Remove `data-kt-scrolltop="true"`attribute to avoid lazy initialization. Options `offset`and `speed`replicate `data-kt-scrolltop-offset`and `data-kt-scrolltop-speed`options functionaliy as described above.
`go` | Triggers the ScrollTop function. If there is room to scroll to top, this will trigger scrolltop to start scrolling to the top of the page.
    scrollTop.go();
`getElement` | Returns the scrollTop element.
    scrollTop.getElement();

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### Learn & Get Inspired

## Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now