Jquery滚动到部分页面，点击间歇工作。

Question

我有一些图像选项卡内容，这是很好的工作。但是，在小屏幕上，选项卡相互垂直地堆叠在一起，而不是水平对齐。THis意味着人们不会知道在手机上向下滚动看内容。

我试图让它工作，所以当选项卡被选中时，它们会自动向下滚动到选项卡式内容的顶部，以便选项卡内容的标题显示在屏幕的顶部。我有以下代码，但它似乎间歇工作。有人知道我做错了什么吗？(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

以下是小提琴的更新版本。

我改变了这句话：

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

要找到实际想要滚动到的.hero-title，而不是所有它们。

另外，隐藏和显示必须在读取偏移量之前进行，因为它依赖于元素的可见性。

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

注意: jQuery不支持获取隐藏元素的偏移坐标.

当选择第一个选项卡并单击某些选项卡时，您的版本将一致工作。这是因为offset获取匹配元素集合中第一个元素的偏移量，并且在隐藏当前打开的选项卡之前读取偏移量。当打开其他选项卡时，您将获得0作为偏移量。