Question

My html page is divided into many div

<div id=1> //content1</div>
<input type="button" value="Go to div 2" />
<div id=2> //content2 </div>

My div having id=2 is too below on the page. I want that whenever I click the button the div having id 2 slides up and reaches at the starting of the page.

Answer 1

If you don’t want to simply use an anchor or ID reference and want to animate it, just use animate.

Here’s a fiddle : http://jsfiddle.net/zMGnQ/

#div1, #div2 {
    height: 400px;
    background: #00aa00;
    margin: 20px;
    padding: 20px;
}

<div id='div1'> //content1</div>
<input id='but' type="button" value="Go to div 2" />
<div id='div2'> //content2

$('#but').click(function(){
    $('body').animate({
        scrollTop: $('#div2').offset().top

    })
})