Basic jQuery Smooth Scrolling Plugin - smoothScroll

File Size: 3.12 KB
Views Total: 14998
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Basic jQuery Smooth Scrolling Plugin - smoothScroll

smoothScroll is an ultra-lightweight jQuery plugin which provides smooth anchor scrolling experience to your long content web page.

How to use it:

1. Include the jQuery smoothScroll plugin after jQuery library in your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/smoothScroll.js"></script>

2. Include the jQuery UI for more easing options (Optional).

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>

3. Create anchor links and targeted content as follows.

<a href="#content1">Content1</a>
<a href="#content2">Content2</a>
<a href="#content3">Content3</a>

<h2 id="content1">Content1</h2>
...
<h2 id="content2">Content2</h2>
...
<h2 id="content3">Content3</h2>
...

4. Initialize the plugin with default settings.

$('a').smoothScroll();

4. Available options.

$('a').smoothScroll({
duration: 1000, // animation speed
easing: 'swing', // find more easing options on http://api.jqueryui.com/easings/
offset: 0 // custom offset
});

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