Smoothly Scroll An Element Into View - jQuery smoothScrolling

File Size: 2.91 KB
Views Total: 1125
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Smoothly Scroll An Element Into View - jQuery smoothScrolling

An ultra-light jQuery smooth scroll plugin which enables anchor links to smoothly scroll the current page to specific positions within the document.

See also:

How to use it:

1. Add the jQuery smoothScrolling plugin's script to the page, after you've added jQuery.

<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
</script>
<!-- smoothScrollin-jQuery -->
<script src="smoothScrolling.js"></script>

2. Create anchor links pointing to the page sections within the same document. That's it.

<a href="#section1">To Section One</a>
<a href="#section2">To Section Two</a>

<section id="section1">
  Section One
</section>

<section id="section2">
  Section Two
</section>

3. Customize the animation speed in milliseconds Default: 1000ms.

$('html, body').animate({
  scrollTop: target.offset().top
}, 1000);

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