如何制作一个当用户点击链接时从顶部向下滚动的div？

Question

我想写一些JS，让我能够重现点击链接时该网站所达到的效果：

Heydays.no

如果你访问这个链接然后点击页面右上角的小图标之一，你就会看到我想要用js实现的效果。我认为这是某种具有 js 操作的隐藏或重新定位的 div。

非常感谢帮助， 谢谢瑞安。

Answer 1

它并不是真正从顶部滚动，而是使用动画将 div 引入视图。有几个 JS 库可以帮助您完成此任务，而无需您编写自己的库。
研究一下 JQuery 和 Scriptaculous。两者都有很好的例子，你可以看看。
该网站使用 JQuery。

Answer 2

基本上你所拥有的是一个隐藏的 div，其中包含一些信息并调用了 jQuery 方法 .hide() 。当用户将鼠标悬停在这些链接之一上时，就会使用 jQuery 方法 .show() 调用该 div。他们的版本是通过自定义脚本完成的。

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 及更低版本目前不支持过渡。该按钮只会导致 div 在这些浏览器中“快速”打开和关闭。