jQuery (". Element"). ScrollTop (0); не работает

Question

У меня есть несколько вкладок, как это:

[Вкладка 1] [2 таб]

--content

[Вкладка 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-скрипта. Но почему-то Он не отвечает.

jsFiddle:

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

Примечание: Это работает, когда я меняю jQuery(".tab-content").scrollTop(0); к jQuery(window).scrollTop(0);, но это не то, что я хочу, потому что мое содержание не в верхней части страницы.

Просто не могу понять, почему он не работает на первом месте. Кто-нибудь выясняет, в чем проблема?

Answer 1

Вы должны прокручивать окно в верхней части контейнера вкладок, вы можете получить смещение .tab-content элемента с помощью JQuery смещения функции, а затем получить главный атрибут:

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