如何在屏幕顶部打开点击的手风琴标签？答案

【问题标题】：How to get a clicked accordion tab to be opened at the top of your screen?如何在屏幕顶部打开点击的手风琴标签？
【发布时间】：2014-01-24 21:34:25
【问题描述】：

我正在使用 Zurb 的 Foundation 框架来创建响应式网络应用程序。我被困住的一件事，但我真正希望实现的是，当用户单击手风琴选项卡（例如：Zurb's site）时，我希望将要打开（并单击）的选项卡“滚动”到顶部屏幕，然后是 openend，而不是在单击屏幕上的某个位置时，它会从该点打开。

简单地说：当点击折叠标签时，页面应该滚动，因此点击的元素位于页面顶部（偏移+20px）。

谢谢！

【问题讨论】：

我使用 child.scrollIntoView() 然后 container.scrollTop-=20 之后
快速 google 到 'child.scrollIntoView()' 让我觉得你在谈论 .aspx 或 .net 编程。这些是 Javascript 脚本吗？
它是 JS dom 中的 html Element 对象的一种方法，例如 document.body... 当我用谷歌搜索“scrollIntoView”时，我得到了一个 mdn 幸运命中。 ScrollIntoView() 效果很好，但它离顶部太近了，这就是为什么 20px 之后向上滚动使它更好地工作的原因。当一起完成时，你永远不会真正看到两个不同的卷轴。

标签： javascript jquery accordion zurb-foundation

【解决方案1】：

我以前从未听说过 Zurb，但是您需要修改添加/删除 active 类的函数。请参阅此处的代码： https://github.com/zurb/foundation/blob/master/js/foundation/foundation.accordion.js

我建议从这里更改第 33 行：

target.addClass(settings.active_class);

到这里

$('html, body')
    .animate({ scrollTop: target.offset().top }, 2000)
    .promise()
    .done(function() {
        target.addClass(settings.active_class);
    });

但是我没有尝试过所以我不知道它是否真的有效D：

滚动需要 2 秒（查找 2000），完成后，像以前一样添加类

【讨论】：

让我澄清这是/部分/工作。我在偏移量中添加了“.top - 100”，以创建真正的偏移量。但是，有时它无法正确定位。我找不到它何时出现以及何时没有正确定位的特征。未正确定位，意味着选项卡位于视口“上方”。发现问题时将发布！谢谢，已经难以置信了！ :)
我认为问题出在一个动画脚本，它可以为标签面板的打开/折叠设置动画。我添加了一个等于滚动持续时间的延迟（*）。它不再位于顶部。但是，滚动和打开/折叠效果现在看起来更自然一点，更好！ =D 谢谢！