Silky Smooth & Momentum Scrolling With mrD-SmoothScroller

Category: Animation , Javascript | June 11, 2024
0 Comment
Authormonsieurdd
Last UpdateJune 11, 2024
LicenseMIT
Tags
,
Views424 views
OfficialGo to website
Live DemoDownload
Silky Smooth & Momentum Scrolling With mrD-SmoothScroller

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

See Also:

You Might Be Interested In:

Leave a Reply