Download Custom Smooth Scroll Behavior For Browsers – scrollSpeed

This time I will share jQuery Plugin and tutorial about Custom Smooth Scroll Behavior For Browsers – scrollSpeed, hope it will help you in programming stack.

File Size:	4.13 KB
Views Total:	4496
Last Update:	3 years ago
Publish Date:	3 years ago
Official Website:	Go to website
License:	MIT

Demo Download

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.

How to use it:

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

1
<script src="https://code.jquery.com/jquery-3.3.1.min.js"

2
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"

3
        crossorigin="anonymous">

4
</script>

5
<script src="jQuery.scrollSpeed.js"></script>

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

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"

2
        integrity="sha384-mE6eXfrb8jxl0rzJDBRanYqgBxtJ6Unn4/1F7q4xRRyIw7Vdg9jP4ycT7x1iVsgb"

3
        crossorigin="anonymous">

4
</script>

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

1
$(function() {  

2
 
3
  // scrollSpeed(step, speed);

4
  jQuery.scrollSpeed(100, 800);

5
     
6
});

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

1
$(function() {  

2
 
3
  // scrollSpeed(step, speed, easing);

4
  jQuery.scrollSpeed(100, 800, 'easeInOutBack');

5
     
6
});

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

source : jquery.net

How to use it:

Share this:

Related posts: