Overview
Smooth Scroll is a lightweight script to animate scrolling to anchor links. For more info please visit the plugin's site.
Usage
Smooth Scroll's Javascript files are bundled in the global scripts bundles and are globally included in all pages:
<link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/plugins/global/plugins.bundle.js"></script>Initialization
-
Smooth Scroll's Javascript is globally initialized with our
KTAppwrapper defined insrc/js/components/app.js. -
To include Smooth Scroll into your project, you need to include a HTML attribute
data-kt-scroll-togglewithin theaelement with ahrefset with a hastag#. For more options available, such asoffsetparameters, please refer to the initialization definition insrc/js/components/app.js. - For more information on Smooth Scroll's other options, please refer to the official plugin site.
Basic
Click on the button below to scroll to the top without any offset.
<a href="#top" class="btn btn-primary" data-kt-scroll-toggle>Scroll to Top</a>
<div id="top">
...
</div>Offset
Click on the button below to scroll to "Usage" with offset. Add the HTML attribute
data-kt-scroll-offset with the offset value in px to the anchor element.
<a href="#usage" class="btn btn-primary" data-kt-scroll-toggle>Scroll to Usage</a>
<div id="usage" data-kt-scroll-offset="85">
...
</div>Responsive
Click on the button below to scroll to "Initialization" with a responsive offset. Add the HTML attribute
data-kt-scroll-offset with the offset value in px to the anchor element. The responsive values follows the standard Bootstrap breakpoints where default represents the base size and moves up with sm, md, lg or xl.
<a href="#initialization" class="btn btn-primary" data-kt-scroll-toggle>Scroll to Usage</a>
<div id="initialization" data-kt-scroll-offset="{default: 75, lg: 85}">
...
</div>
2024©
Keenthemes
