Как сделать div, который прокручивается сверху вниз, когда пользователь нажимает на ссылку?

Question

Я хотел бы написать несколько JS, которые позволят мне воссоздать эффект, достигнутый этим веб-сайтом при переходе по ссылкам:

Heydays.no

Если выперейдите по этой ссылке, затем нажмите один из маленьких значков в верхнем правом углу страницы, вы увидите желаемый эффект, которого я хочу добиться с помощью js.Я предполагаю, что это какой-то скрытый или перемещенный div с действием js.

Помощь будет высоко оценена, спасибо Райан.

Answer 1

Это не прокрутка сверху, это отображение div с помощью анимации.Существует несколько библиотек JS, которые могут помочь вам без написания вашей собственной.Посмотрите на JQuery и Scriptaculous.У обоих есть отличные примеры, на которые вы можете посмотреть.Этот сайт использует JQuery.

Answer 2

По сути, у вас есть скрытый div, который содержит некоторую информацию и для которого был вызван метод jQuery .hide (). Когда пользователь наводит мышью на одну из этих ссылок, div вызывается с использованием метода jQuery .show (). Их версия сделана с использованием пользовательских сценариев.

Answer 3

Вы можете сделать это с помощью переходов CSS3:

#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;
}

С div, как это:

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

Имейте в виду, что только IE10 будет генерировать эффект слайда здесь, поскольку IE9 и ниже в настоящее время не поддерживают переходы afaik. Кнопка просто заставит div открываться и закрываться в этих браузерах.