当用户单击链接时，如何制作从顶部向下滚动的 div？答案

【问题标题】：How to make a div that scrolls down from top when user clicks link?当用户单击链接时，如何制作从顶部向下滚动的 div？
【发布时间】：2012-02-03 23:51:39
【问题描述】：

我想写一些JS，让我重新创建点击链接时这个网站实现的效果：

Heydays.no

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

非常感谢您的帮助，谢谢瑞恩。

【问题讨论】：

这里是使用 jQuery 的方法：[stackoverflow.com/questions/4603397/jquery-animate-height][1] [1]:stackoverflow.com/questions/4603397/jquery-animate-height

标签： javascript html css

【解决方案1】：

它并不是真正从顶部滚动，而是使用动画将 div 带入视图。有几个 JS 库可以帮助您解决这个问题，而无需您自己编写。查看 JQuery 和 Scriptaculous。两者都有很好的例子，你可以看看。该站点使用 JQuery。

【讨论】：

$("p.neat").addClass("ohmy").show("slow");就在jquery.com的首页！！！

【解决方案2】：

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

【讨论】：

【解决方案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 在这些浏览器中“快速”打开和关闭。

【讨论】：