【发布时间】：2014-09-30 00:30:17
【问题描述】：
我有一个带有垂直滚动条的大型手风琴。当用户单击它时，我需要一个 javascript 来将选定的面板及其内容平滑地滚动到手风琴的顶部。单击面板 1，然后单击面板 2。面板 2 中途显示其内容。
我在这个网站和 jsfiddle.net 上看到了几个与 jQuery ui 手风琴和插件相关的答案，但我的手风琴的结构与 jQuery 中的不相似。 这是我的第一个网站，我是 javascript 和 jQuery 的新手。
我有一个可以很好地使用滑动功能的 javascript，并且非常希望保留它。在我自信地学会如何使用之前，我不喜欢使用任何 jQuery 插件。 有人可以修改我的javascript以适应滚动功能吗？已尝试阅读许多内容，例如获取面板的内容高度和使用滚动功能等，但经过漫长的三天后，我仍在努力编写一个有效的脚本。请在附件中找到我的 html 和 javascript 代码。 非常感谢您的帮助和帮助。
enter code here
/*jQuery time*/
$(document).ready(function() {
$("#accordian h3").click(function() {
//slide up all the link lists
$("#accordian ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
if (!$(this).next().is(":visible")) {
$(this).next().slideDown();
}
})
})* {
margin: 0;
padding: 0;
}
#description {
position: relative;
top: 200px;
width: 300px;
height: 400px;
border: 2px solid blue;
}
#accordian {
font-family: arial, helvetica, sans-serif;
background: #006F70;
position: relative;
top: 10px;
width: 250px;
margin: 0px 16px 0 16px;
color: white;
}<html>
<head>
<link href="accordianFABtest-GS.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="description">
<div id="accordian">
<ul>
<li>
<h3>Panel 1</h3>
<ul>
<li><a href="#">Content 1</a>
</li>
<li><a href="#">Content 1</a>
</li>
<li><a href="#">Content 1</a>
</li>
<li><a href="#">Content 1</a>
</li>
<li><a href="#">Content 1</a>
</li>
<li><a href="#">Content 1</a>
</li>
<li><a href="#">Content 1</a>
</li>
<li><a href="#">Content 1</a>
</li>
<li><a href="#">Content 1</a>
</li>
<li><a href="#">Content 1</a>
</li>
<li><a href="#">Content 1</a>
</li>
<li><a href="#">Content 1</a>
</li>
<li><a href="#">Content 1</a>
</li>
<li><a href="#">Content 1</a>
</li>
<li><a href="#">Content 1</a>
</li>
<li><a href="#">Content 1</a>
</li>
<li><a href="#">Content 1</a>
</li>
<li><a href="#">Content 1</a>
</li>
</ul>
</li>
<li>
<h3>Panel 2</h3>
<ul>
<li><a href="#">Content 2</a>
</li>
<li><a href="#">Content 2</a>
</li>
<li><a href="#">Content 2</a>
</li>
<li><a href="#">Content 2</a>
</li>
<li><a href="#">Content 2</a>
</li>
<li><a href="#">Content 2</a>
</li>
<li><a href="#">Content 2</a>
</li>
<li><a href="#">Content 2</a>
</li>
<li><a href="#">Content 2</a>
</li>
<li><a href="#">Content 2</a>
</li>
<li><a href="#">Content 2</a>
</li>
<li><a href="#">Content 2</a>
</li>
<li><a href="#">Content 2</a>
</li>
<li><a href="#">Content 2</a>
</li>
</ul>
</li>
<li>
<h3>Panel 3</h3>
<ul>
<li><a href="#">Content 3</a>
</li>
<li><a href="#">Content 3</a>
</li>
<li><a href="#">Content 3</a>
</li>
<li><a href="#">Content 3</a>
</li>
<li><a href="#">Content 3</a>
</li>
<li><a href="#">Content 3</a>
</li>
</ul>
</li>
<li>
<h3>Panel 4</h3>
<ul>
<li><a href="#">Content 4</a>
</li>
<li><a href="#">Content 4</a>
</li>
<li><a href="#">Content 4</a>
</li>
<li><a href="#">Content 4</a>
</li>
<li><a href="#">Content 4</a>
</li>
<li><a href="#">Content 4</a>
</li>
<li><a href="#">Content 4</a>
</li>
<li><a href="#">Content 4</a>
</li>
<li><a href="#">Content 4</a>
</li>
<li><a href="#">Content 4</a>
</li>
<li><a href="#">Content 4</a>
</li>
<li><a href="#">Content 4</a>
</li>
<li><a href="#">Content 4</a>
</li>
<li><a href="#">Content 4</a>
</li>
<li><a href="#">Content 4</a>
</li>
<li><a href="#">Content 4</a>
</li>
<li><a href="#">Content 4</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="accordian1.js" type="text/javascript"></script>
</body>
</html>【问题讨论】：
-
非常感谢您查看我的代码。我希望实现的是当用户单击面板 2 时，脚本应该折叠面板 1 的内容（如果它已打开）并滚动顶部面板 1 标题，即将其推到上方并将面板 2 标题带到顶部手风琴盒并显示其内容。我希望手风琴的整个高度为 400 像素。类似于stampede-design.com/blog/demo/shaiful/large-accordion/… 中描述的效果。我很抱歉没有让自己清楚。谢谢。
标签： javascript html scroll accordion