javascript - 滚动到放置在其自己的 DIV 中的 jQuery Accordion 控件中的打开选项卡

Question

我正在使用 jQuery Accordion位于其自己的可滚动 div 中的控件:

<div id="mainSection">
    <div id="accordion">
    </div>
</div>

使用 CSS:

#mainSection{
    clear: both;
    margin: 0;
    padding: 4px 0px 0px 0px;
    overflow-y: auto;
    max-height: 600px;
    border-top: thin solid #EEE;
}

Accordion 控件初始化为使用特定选项卡打开，如下所示:

    $("#accordion").accordion({
            collapsible: true,
            heightStyle: "content",
            active: nActiveTab
        });

此 Accordion 的选项卡是动态添加的。

如果 Accordion 没有太多标签，这会起作用。但是，如果 Accordion 有 100 个选项卡，并且我想打开最底部的选项卡 99(在我的 nActiveTab 变量中)，那么在创建 Accordion 时，它不会向下滚动到那个打开的选项卡99.

有什么办法让它滚动到它吗？

附言。这是 fiddle为此。

Answer 1

用您的代码创建一个 fiddlejs 总是有帮助的。

尝试在 Accordion 代码之后添加它，让我知道它是如何工作的:

var activeTabOffset = $(".ui-accordion-header-active").offset().top;
var mainSectionHeight = $('#mainSection').height();

if (activeTabOffset > mainSectionHeight) {
    $('#mainSection').animate({scrollTop: activeTabOffset}, 1000);
}

这将做的是将您的 mainSection 元素向下(或向上)滚动到第一个事件的 Accordion 。我没有测试它，但它应该可以工作。

这是一个 fiddle :http://jsfiddle.net/95g0L8pq/3/