Author: | monsieurdd |
---|---|
Views Total: | 179 views |
Official Page: | Go to website |
Last Update: | June 11, 2024 |
License: | MIT |
Preview:

Description:
mrD-SmoothScroller is a tiny JavaScript library that replaces the native scroll events with a smooth scroll behavior. Supports mouse wheel, trackpad, and keyboard input.
Instead of jarring jumps between sections, this library allows your visitors to smoothly scroll between page elements when clicking anchor links or scrolling through the document. Its ease-in-out easing effect mimics real-world physics for a natural feel.
You can also customize the scrolling duration, sensitivity, and deceleration with customizable options passed via HTML data attributes.
How to use it:
1. Download and include the mrd-smoothscroller.js
script in your document.
<script src="mrd-smoothscroller.js"></script>
2. Add the class="mrd-smooth"
to the <body>
tag and configure the smooth scrolling behavior with the following data-*
attributes:
- data-scroll-duration: Sets animation duration in milliseconds (default: 500)
- data-scroll-deceleration: Controls scrolling slowdown (default: 0.93)
- data-scroll-sensitivity: Adjusts scrolling responsiveness (default: 0.05)
<body class="mrd-smooth" data-scroll-duration="1000" data-scroll-deceleration="0.9" data-scroll-sensitivity="0.055" data-scroll-isScrolling="false" data-scroll-velocity="0">
3. That’s it. The library will automatically apply the smooth scroll behavior to all anchor links within your document.
<nav> <a href="#section1">Section 1</a> <a href="#section2">Section 2</a> <a href="#section3">Section 3</a> </nav> <section id="section1">Section 1</section> <section id="section2">Section 2</section> <section id="section3">Section 3</section>
Changelog:
06/11/2024
- Update JS
06/03/2024
- Added more configs