How to achieve custom jQuery page scroll api as in this example?

I recently came across one of Google's projects "What do you love" and saw a nice feature there.

If you visit On your left you will see a small box that allows you to scroll the page "Quiet Cool" I thought when I saw it ))) I looked over the internet to find jQuery plugins or Tutorials on how to do similar thing (jQuery/javascript is not my strong side), but I couldn't find any.

So could anyone please explain how to make similar "Api/Feature" and provide code snippets if possible, that would really help. Ohh an jQuery solution is preferable.


As is so frequently the case, your best bet is to open your browser's Developer Tools and look at what's actually going on there! In this case, it looks like a static background (the grey boxes) with a blue frame on top of it, somehow made draggable, that calls one of the window scrolling functions after doing a bit of proportions arithmetic to determine how far to scroll.

Here is a simple demo I put together to show you how to animate the scroll of a page:

In my example, the basic idea is to bind to a click event for some links and animate the scrollTop of the html element:

$('#nav').find('a').on('click', function (event) {
    $('html').animate({scrollTop : $(this).attr('data-scrollTop')}, 500);

Need Your Help

Data storage for time series data

time-series bigdata query-performance

I have some scientific measurement data which should be permanently stored in a data store of some sort.

Android xml selector for layouts

java android xml

I was wanting to know if there is a selector for layouts like there is for drawables.