jQuery 手风琴，将单击的选项卡的开头滚动到顶部，如果展开的选项卡在被单击的选项卡上方，则不起作用？答案

【问题标题】：jQuery accordion, scroll beginning of clicked tab to the top, doesn't work if expanded tab is above the one being clicked?jQuery 手风琴，将单击的选项卡的开头滚动到顶部，如果展开的选项卡在被单击的选项卡上方，则不起作用？
【发布时间】：2013-11-05 10:51:24
【问题描述】：

在让我的 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 技能仅限于基本的剪切和粘贴理解！ ^^

在此先感谢所有帮助和指点区域，然后欢迎！ :)

干杯

【问题讨论】：

标签： jquery jquery-ui accordion scrollto scrolltop

【解决方案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

【讨论】：

是的！ :D 非常感谢，我试图延迟实际的滚动事件，但没有运气，但这有效！太棒了！
效果很好！我唯一的问题是你为什么要var self = this;？我试着用var theOffset = $(this).offset(); 来做，但没有用。知道为什么吗？
@Technotronic - 因为 setTimeout 回调中 this 的值与外部不同。
对。傻我。谢谢！

【解决方案2】：

您可以向手风琴添加激活的功能。这样，它会在其他显示/隐藏动画完成后触发。

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

如果要折叠打开的手风琴选项卡，则需要 try catch，因为 ui.newHeader 未定义。

【讨论】：