sliding a page in html

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.

http://stackoverflow.com/questions/6147168/how-to-move-the-window-by-x-number-of-pixels-using-javascript/6147261#6147261 my answer in there describes in detail which methods you should be using :) — djlumley, May 31 '11 at 06:03
Beware of using digits as ids: [What are valid values for the id attribute in HTML?](http://stackoverflow.com/questions/70579/70586#70586) — Wesley Murch, May 31 '11 at 06:04

score 3 · Accepted Answer · answered May 31 '11 at 06:04

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

    })
})

JohnP... fast and furious as always ;) +1 – Roko C. Buljan May 31 '11 at 06:12 — Roko C. Buljan, May 31 '11 at 06:12

score 0 · Answer 2 · answered May 31 '11 at 06:07

0

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

answered May 31 '11 at 06:07

midhunhk

5,560
7
52
83

2

That hides the second div, it doesn't scroll to it. – djlumley May 31 '11 at 06:13

sliding a page in html

2 Answers2