how to create Google like vertical page scroll in jQuery

Hi,

Here is a simple dynamic function to create a smooth ,Google plus like animated vertical page scroll in jQuery.

Create a page with various divisions and give a unique "id" to it.

Also, create another div and name the ID as "div_name", we will access this to display the name of the scrolled division.

<div id="div_name</div>                                           

create links and onclick of each link call the JavaScript function "scroll_section(ide)" , will see it in detail next.

<a href="javascript: void(0);" onclick="scroll_section("div10")">Division10</a>

here, "div10" is the ID of the division you want the page to be scrolled.

Now for the function,

function scroll_section(ide)

{

     $('#div_name').html("Page"+ide).animate({top:"15px"},1000);

     $('html,body').animate({scrollTop: $("#"+ide).offset().top},1000);

}

The first code in the function, is used to display the name of the current division you have scrolled into, with the animation delay of 1000 ms and $('#div_name').html("Page"+ide) will output the name of that division, hence make sure you give genuine name to ID tag.

$('#div_name').html("Page"+ide).animate({top:"15px"},1000);

The second piece of code will actually find the div element you have called and it will scroll that particular division onto the window top with smooth scrolling, with a delay of 1000ms.

$('html,body').animate({scrollTop: $("#"+ide).offset().top},1000);

That is it guys!.

kindly help the blog to grow in anyway you can. ;)