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

Question

我有多個這樣的標簽：

[標簽 1] [標簽 2]

- 內容

[標簽 1] [標簽 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腳本代碼。 但不知何故它沒有響應。

js小提琴：

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

注意：當我更改jQuery(".tab-content").scrollTop(0);時它有效jQuery(".tab-content").scrollTop(0); 到jQuery(window).scrollTop(0); 但這不是我想要的，因為我的內容不在頁面頂部。

只是不明白為什么它首先不起作用。 有沒有人弄清楚是什么問題？

Answer 1

您必須將窗口滾動到選項卡容器的頂部，您可以使用 jquery offset 函數獲取.tab-content元素的偏移量，然后獲取 top 屬性：

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