javascript - jQuery (".element").scrollTop(0);不起作用

Question

我有多个这样的标签:

[tab 1] [tab 2]

--content

[tab 1] [tab 2]

HTML:

<div class="tabs">

    <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a></li>
        <li><a href="#tab2">Tab #2</a></li>
    </ul>  

    <div class="tab-content">

        <div id="tab1" class="tab active">#1 content</div>

        <div id="tab2" class="tab">#2 content </div> 

    </div>

    <div class="tabs">

        <ul class="tab-links">
            <li class="active"><a href="#tab1">Tab #1</a></li>
            <li><a href="#tab2">Tab #2</a></li>
        </ul>

    </div>

</div>

如您所见，标签内容上方和下方有标签列表。

只要内容很长，用户在更改选项卡列表底部的选项卡时就必须向上滚动到页面。

所以，当用户从下方更改标签时，我想自动滚动到顶部。我将 jQuery(".tab-content").scrollTop(0); 添加到 java 脚本代码中。但不知何故它没有回应。

jsFiddle:

http://jsfiddle.net/4m2ut16k/8/

注意: 当我将 jQuery(".tab-content").scrollTop(0); 更改为 jQuery(window).scrollTop( 0); 但这不是我想要的，因为我的内容不在页面顶部。

只是不明白为什么它一开始就不起作用。有没有人弄清楚问题出在哪里？

Answer 1

您必须将窗口滚动到选项卡容器的顶部，您可以使用 jquery 偏移函数获取 .tab-content 元素的偏移量，然后获取 top 属性:

jQuery(window).scrollTop(jQuery(".tab-content").offset().top);