jQuery(".element").scrollTop(0); doesn't work

Question

I have multiple tabs like this:

[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>

As you can see there are tab list above and below the tab-content.

As long as content is long, user has to scroll-up to page when he change the tab on the tab-list-bottom.

So, I wanted to scrollTop automatically when user change the tab from below. And I added jQuery(".tab-content").scrollTop(0); into the java-script code. But somehow It doesn't respond.

jsFiddle:

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

Note: It works when I change jQuery(".tab-content").scrollTop(0); to jQuery(window).scrollTop(0); but this is not what I want because my content not on the top of page.

Just can't understand why it doesn't work on the first place. Has anyone figure out what is the problem?

Answer 1

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

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