jQuery Accordion ，将单击的选项卡的开头滚动到顶部，如果展开的选项卡位于单击的选项卡之上，则不起作用？

Question

让我的 jquery Accordion 做我想做的事情时遇到了一点问题。

我总是希望正在单击的选项卡从页面顶部滚动到固定数量的像素，并且我有点让它工作了。但是，只要事件选项卡位于被单击的选项卡上方，并且页面已经向下滚动一点，则被单击选项卡的顶部和部分内容就会向上滚动到页面顶部。

这就是我得到的:

$(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 技能仅限于基本的剪切和粘贴理解! ^^

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

干杯

Answer 1

是的，关闭标签的高度就是问题的原因。

由于上面的选项卡折叠，单击的 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
        });
});

Updated Fiddle