Custom Smooth Scroll Behavior For Browsers - scrollSpeed

scrollSpeed is a small and easy-to-use jQuery plugin which applies the smooth scroll functionality with custom speed & easing to native browser scroll behavior.

The plugin will be disabled on Internet Explore and MS Edge for performance.

See also:

• Smooth Scrolling Effect with Mouse Wheel
• Lightweight Kinetic/Momentum Scroll Plugin - jQuery Kinetic
• Adding Momentum Scrolling To Web Content - scrollEasing
• Smooth Scrolling Effect with jQuery

How to use it:

1. Insert the latest version of jQuery library and the scrollSpeed plugin into the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="jQuery.scrollSpeed.js"></script>

2. Include the jQuery easing plugin for extra easing functions (OPTIONAL).

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" 
        integrity="sha384-mE6eXfrb8jxl0rzJDBRanYqgBxtJ6Unn4/1F7q4xRRyIw7Vdg9jP4ycT7x1iVsgb" 
        crossorigin="anonymous">
</script>

3. Initialize the plugin and specify the step size (pixels) and scrolling speed (milliseconds).

$(function() {  

  // scrollSpeed(step, speed);
  jQuery.scrollSpeed(100, 800);
    
});

4. Add an easing function to the smooth scroll behavior.

$(function() {  

  // scrollSpeed(step, speed, easing);
  jQuery.scrollSpeed(100, 800, 'easeInOutBack');
    
});

---

This awesome jQuery plugin is developed by aslamanver. For more Advanced Usages, please check the demo page or visit the official website.