Smooth Scrolling to Anchor with jQuery

The days of abruptly jumping to an anchor link within a page are over. There exists different solutions to scroll smoothly.

What Smooth Scrolling to Anchor means ?
You click on a link, and the page smoothly and gracefully scrolls down to a specific section of content. This transition is easy on the eyes, it’s appealing, and damnit – it’s just plain cool!

We’ll utilize jQuery’s built-in function scrollTop() to do our heavy lifting.
This example works if your HTML is set up like so:

// content goes here

<a name="top" />
<a href="#bottom">Link</a>

// more content

<a href="#top">Link</a>
<a name="bottom" />

// more content

jQuery

$(function() {
 
  // scroll handler
  var scrollToAnchor = function( id ) {
 
    // grab the element to scroll to based on the name
    var elem = $("a[name='"+ id +"']");
 
    // if that didn't work, look for an element with our ID
    if ( typeof( elem.offset() ) === "undefined" ) {
      elem = $("#"+id);
    }
 
    // if the destination element exists
    if ( typeof( elem.offset() ) !== "undefined" ) {
 
      // do the scroll
      $('html, body').animate({
        scrollTop: elem.offset().top
      }, 1000 );
 
    }
    
  };
 
  // bind to click event
  $("a").click(function( event ) {
   
    // only do this if it's an anchor link
    if ( $(this).attr("href").match(/^#/) ) {
      
      // prevent default propagation
      event.preventDefault();
      
      // scroll to the location
      var href = $(this).attr('href').replace('#', '');
      scrollToAnchor( href );
 
      // if we have pushState
      if ( history.pushState ) {
        history.pushState( null, null, '#'+href );
      }
      
      // fallback to prevent jitter
      return false;
 
    }
 
  });
 
});

Just updated this again and added pushState in, so that it keeps track of the hash change in modern browsers. If a user clicks away after clicking your anchor link, it’ll take them back to the anchor position they were at instead of making them rescroll to that position.
Alternative 2
HTML

 <a href="#target" class="scrollMe">Go to </a>
 <div id="target">Lorem Ipsum...</div>

Jquery

$('a[href*=#]:not([href=#])').click(function() {
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

       var target = $(this.hash);
       target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
       if (target.length) {
         $('html,body').animate({
           scrollTop: target.offset().top - 20
         }, 1000);
         return false;
       }
     }
   });

Source: https://gist.github.com/jpederson/9496381
http://bradsknutson.com/blog/smooth-scrolling-to-anchor-with-jquery/