How to make a div that scrolls down from top when user clicks link?

Question

I would like to write some JS that allows me to recreate the effect this website achieved when you click on the links:

If you visit this link then click one of the small icons in the upper right corner of the page, you will see the desired effect that I want to achieve with js. I assume this is some kind of hidden or repositioned div that has a js action.

Help would be much appreciated, Thanks Ryan.

Here's is how to do it with jQuery: [http://stackoverflow.com/questions/4603397/jquery-animate-height][1] [1]: http://stackoverflow.com/questions/4603397/jquery-animate-height — stefannh, Feb 08 '12 at 10:40

score 1 · Answer 1 · answered Feb 03 '12 at 23:57

1

It's not really scrolling from top it is bringing the div into view using animation. There are several JS libraries out there that can help you with this without you writing your own. Look into JQuery and Scriptaculous. Both have great examples you can look at. That site uses JQuery.

answered Feb 03 '12 at 23:57

dbrin

15,525
4
56
83

$("p.neat").addClass("ohmy").show("slow"); is right on the front page of jquery.com !!! – dbrin Feb 04 '12 at 00:16

lpd · Answer 2 · 2012-02-04T00:09:20.983

You could do this with CSS3 transitions:

#sliding_div {
    /* must have a set height to work */
    -webkit-transition: height 2s ease;
    -moz-transition: height 2s ease;
    -o-transition: height 2s ease;
    transition: height 2s ease;
}

With a div like so:

<div style="height: 0px;" id="sliding_div"><!-- content --></div>
<div onclick="var sliding_div = document.getElementById('sliding_div'); if (sliding_div.style.height == '0px') sliding_div.style.height = '300px'; else sliding_div.style.height = '0px';"><img /></div>

Keep in mind that only IE10 would generate the slide effect here as IE9 and below don't presently support transitions afaik. The button would just cause the div to "snap" open and closed in these browsers.

score 0 · Answer 3 · answered Feb 04 '12 at 00:06

Basically what you have there is a hidden div which contains some information and has had jQuery method .hide() called on it . When the user mouses over one of those links, the div is then called using the jQuery method .show(). Their version is done with custom scripting.

How to make a div that scrolls down from top when user clicks link?

3 Answers3