jQuery手风琴，将点击标签的开头滚动到顶部，如果展开的标签位于被点击的标签上方，则不起作用？

让我的jquery手风琴做我想做的事情有点问题。

我总是希望点击的标签从页面顶部滚动到固定数量的像素，我有点工作。 但是，只要活动选项卡位于单击的选项卡上方，并且页面已经向下滚动一点，单击选项卡的顶部和部分内容就会向上滚动超过页面顶部。

这就是我得到的：

$(function() { $("#accordion").accordion({ autoHeight: false, collapsible: true, heightStyle: "content", active: 0, animate: 300 }); $('#accordion h3').bind('click',function(){ theOffset = $(this).offset(); $('body,html').animate({ scrollTop: theOffset.top - 100 }); }); }); 

这是解释我的问题的小提琴 ，

例如，展开“第2部分”，向下滚动并单击“第3部分”选项卡，它们全部滚动到页面上，相反，它可以工作。

如果在打开一个新选项之前关闭活动选项卡它也可以正常工作，所以我假设这与崩溃选项卡的高度有关，这会使滚动到顶部function！？

希望有人可以提供帮助，我可能会采取错误的方法。 我真的不知道我在做什么，因为我的jquery技能仅限于基本的切割理解！ ^^

在此先感谢，所有的帮助和指针区域更受欢迎！ 🙂

干杯

Answer 1

是的，它被关闭的标签的高度是导致问题的原因。

由于其上方的标签折叠，点击后的h3顶部会立即发生变化。

解决方法（可能是坏的）是在崩溃动画结束后触发滚动动画，即如果折叠动画设置为300ms，则在310ms之后开始滚动动画。

 $(function() { $("#accordion").accordion({ autoHeight: false, collapsible: true, heightStyle: "content", active: 0, animate: 300 // collapse will take 300ms }); $('#accordion h3').bind('click',function(){ var self = this; setTimeout(function() { theOffset = $(self).offset(); $('body,html').animate({ scrollTop: theOffset.top - 100 }); }, 310); // ensure the collapse animation is done }); }); 

更新小提琴

Answer 2

您可以为手风琴添加激活的function。 这样，一旦其他显示/隐藏动画完成，它就会触发。

 $(function() { $("#accordion").accordion({ autoHeight: false, collapsible: true, heightStyle: "content", active: 0, animate: 300, activate: function(event, ui) { try { theOffset = ui.newHeader.offset(); $('body,html').animate({ scrollTop: theOffset.top }); } catch(err){} } }); }); 

如果要折叠打开的折叠式选项卡，则ui.newHeader未定义，则需要try catch。