CODEWITHSUNDEEP
javascriptjqueryhtml
user426795
user426795

Reputation: 11663

sliding a page in html

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.

Upvotes: 1

Views: 199

Answers (2)

midhunhk
midhunhk

Reputation: 5554

Try something like $("#2").slideUp() Check here for more info on JQuery SlideUp()

Upvotes: 0

JohnP
JohnP

Reputation: 50009

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

    })
})

Upvotes: 3

Related Questions