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:

Heydays.no

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.

Answer 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.

Answer 2

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.

Answer 3

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.