Fancy quick scroll like on change.org

Problem

If you read a petition on change.org, you can the on the upper right a css/html powered scroll. The div class is named quick-scroll. I searched for it on the web, but did not find anything.

Do you know code snippes or examples how to include such a nice quick scroll to you own homepage? I appreciate your help! :)

Problem courtesy of: John Optional

Solution

I guess your looking for something like scrollTo?

http://flesler.com/jquery/scrollTo/

You also could use jQuery without a plugin. Just use anchors and scroll to a predefined div, for example you have a menu like this:

<ul class="nav">
 <li><a href="#area-a">Option A</a></li>
 <li><a href="#area-b">Option B</a></li>
 <li><a href="#area-c">Option C</a></li>
</ul>

Content like this:

<div id="area-a"></div>
<div id="area-b"></div>
<div id="area-c"></div>

jQUery:

jQuery('ul.nav a').bind('click',function(event){
var $anchor = jQuery(this);

jQuery('html, body').stop().animate({
  scrollTop: jQuery($anchor.attr('href')).offset().top - 60 },
   1500, 'easeInOutExpo');
  event.preventDefault();
  });
});
Solution courtesy of: xate

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.