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
.scrolltopcss class anddata-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 here for 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).
|
getInstance(DOMElement element)
|
Get the Toggle instance created
|
| Public Methods | |
KTScrolltop(DOMElement element, Object options)
|
Constructs a new instance of KTScrolltop class and initializes a Drawer control:
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.
|
getElement
|
Returns the scrollTop element.
|
2024©
Keenthemes
