Jquery прокрутите до части страницы на рабочем столе с перерывами

Question

У меня есть изображение с вкладками, которое отлично работает. Однако на маленьких экранах вкладки располагаются друг над другом вертикально, а не выравниваются горизонтально. Это означает, что на мобильных телефонах люди не смогут прокрутить вниз, чтобы увидеть контент.

Я пытаюсь заставить его работать, поэтому при выборе вкладок они автоматически прокручиваются до верхней части содержимого с вкладками, чтобы заголовок содержимого с вкладками отображался в верхней части экрана. У меня есть следующий код, но он работает с перерывами. Кто-нибудь знает, что я делаю неправильно? (https://jsfiddle.net/v5p625qb)

// Tabbed Content 
$(".tabbed-content-tab").click(function(evt) { 
    evt.preventDefault(); 
    $('html,body').animate({ 
     scrollTop: $(".hero-title").offset().top 
    }); 

    $(".tabbed-content").removeClass("show"); 

    var classIdentifier = this.className.match(/content\d/); 

    $(".tabbed-content." + classIdentifier).addClass("show"); 
}); 

//$(".tabbed-content-tab").first().click(); 
$(".tabbed-content.content1").addClass("show"); 

---

<div class="tabbed-content-tab button content1 col-sm-2"> 
<div class="pad-box"><img class="aligncenter" src="/wp-content/uploads/2016/01/75675.png" alt="" /> 
<strong>Image tab 1</strong></div> 
</div> 

<div class="tabbed-content-tab button content2 col-sm-2"> 
<div class="pad-box"><img class="aligncenter" src="/wp-content/uploads/2016/01/7567.png" alt="" /> 
<strong>Image tab 2</strong></div> 
</div> 

<div class="tabbed-content-tab button content3 col-sm-2"> 
<div class="pad-box"><img class="aligncenter" src="/wp-content/uploads/2016/01/36556.png" alt="" /> 
<strong>Image tab 3</strong></div> 
</div> 

<div class="tabbed-content-tab button content4 col-sm-2"> 
<div class="pad-box"><img class="aligncenter" src="/wp-content/uploads/2016/01/3232.png" alt="" /> 
<strong>image tab 4</strong></div> 
</div> 

<div class="tabbed-content content1"> 
    <h2 class="hero-title">tab 1 content</h2> 
lorem ipsum 
<iframe src="https://player.vimeo.com/video/5345" width="768" height="432" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 

</div> 

<div class="tabbed-content content2"> 
    <h2 class="hero-title">tab 2 content</h2> 
lorem ipsum 
<iframe src="https://player.vimeo.com/video/3343" width="768" height="432" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 

</div> 

<div class="tabbed-content content3"> 
    <h2 class="hero-title">tab 3 content</h2> 
lorem ipsum 
<iframe src="https://player.vimeo.com/video/3343" width="768" height="432" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 

</div> 


<div class="tabbed-content content4"> 
    <h2 class="hero-title">tab 4 content</h2> 
lorem ipsum 
<iframe src="https://player.vimeo.com/video/3343" width="768" height="432" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 

</div> 

Answer 1

Вот обновленная версия the fiddle.

Я изменил эту строку:

scrollTop: $(".hero-title").offset().top 

, чтобы найти .hero-title вы на самом деле хотите, чтобы перейти к вместо всех из них.

Кроме того, скрытие и показ должны произойти до того, как мы прочитаем смещение, поскольку оно зависит от видимости элемента.

http://api.jquery.com/offset/

Примечание: Jquery не поддерживает получение координат смещения скрытых элементов ...

Ваша версия работает стабильно, когда выбрана закладка первого и нажать кнопку некоторые вкладки. Это связано с тем, что offset получает смещение первого элемента в наборе согласованных элементов, и вы читаете смещение перед скрытием открытой вкладки. Когда какая-либо другая вкладка открыта, вы получаете 0 в качестве смещения.