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 
        });
    });
});

这是一个fiddle来说明我的问题，

例如，展开“第 2 节”，向下滚动并单击“第 3 节”选项卡，所有内容都会滚动出页面，但其他方式也可以。

如果在打开新选项卡之前关闭活动选项卡，它也可以正常工作，所以我假设这与折叠选项卡的高度有关，这会扰乱滚动到顶部功能！？

希望有人可以提供帮助，我可能以错误的方式处理这个问题。我真的不知道我实际上在做什么，因为我的 jquery 技能仅限于基本的剪切和粘贴理解！ ^^

提前致谢，欢迎所有帮助和指点！ :)

Cheers

是的，关闭的选项卡的高度就是问题的原因。

由于上面的选项卡折叠，单击的 h3 的顶部随后立即发生变化。

一种解决方法（可能是一个不好的方法）是在折叠动画完成后触发滚动动画，即如果折叠动画设置为 300 毫秒，则在 310 毫秒或其他时间后开始滚动动画。

$(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
        });
});

更新了小提琴