smoothScrolling-jQuery
What's it?
SmoothScrolling-jQuery is a code snippet that you can include in your project to create smooth scrolling effect between anchor tags within the same page in your HTML document. It is multiple browsers compatible.
Dependencies:
Note: Remember to download jQuery's CDN or file into your project before using this code.
Why to use this smoothScrolling-jQuery
Although, you can recreate the smooth scrolling effect with plain CSS like so:
html { scroll-behavior: smooth; } This method is not browser compatible. While smoothScrolling-jQuery allows to run this effect in any browser including Internet Explorer.
How to include in your project?
-
Include jQuery's CDN at the bottom of the
<body>tag of your HTML document like so:<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script> -
Download the SmoothScrolling-jquery code & link it in your HTML document after the jQuery'S CDN
<script>tag like so:<script src='js/smoothscrolling-jquery.js'></script> -
If you connected it correctly, the plugin should be ready to use now.
-
Finally the script's order should be like so:
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script><script src='js/smoothscrolling-jquery.js'></script>
Customize Scrolling Speed:
You can tweak the scrolling speed by changing the numeric value in the source code like so:
Default Speed Scrolling
$('html, body').animate({ scrollTop: target.offset().top }, 1000); Fast Scrolling
$('html, body').animate({ scrollTop: target.offset().top }, 400); Extremely Slow Scrolling
$('html, body').animate({ scrollTop: target.offset().top }, 4000); Demo Page
Check out the demo
