Smooth Page Scrolling Effects with jQuery and jQuery UI

A really simple jQuery smooth scrolling script which enables anchor links to scroll smoothly to specified position within the document, with variable scrolling speed and easing effects based on jQuery UI. Great for modern one page scrolling websites and single page web applications.

Basic usage:

1. Include the necessary jQuery and jQuery UI JavaScript libraries on the webpage.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>

2. Create anchor links pointing to the corresponding sections of the webpage.

<a href="#slide1">Link 1</a>
<a href="#slide2">Link 2</a>
<a href="#slide2">Link 3</a>

...

<div id="slide1">
  ...
</div>

<div id="slide2">
  ...
</div>

<div id="slide3">
  ...
</div>

...

3. The core JavaScript to enable the smooth scrolling effect.

// for increased performance, so that it doesn't run every single time an anchor is clicked
var $root = $('html, body'); 

// animation time in ms
var speed = 300; 

// animation style 'linear' works without jQuery UI
var animation = 'linear'; 

// main function
$('a').click(function() {
  $root.animate({
    scrollTop: $( $.attr(this, 'href') ).offset().top
  }, speed, animation);
  return false;
});

---

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