jquery - 为什么JQuery scrollTop()无法使用

我有两个divs，每个都有两个classes（隐藏和显示）（这些类是响应Web所必需的）。

的HTML

<!-- buttons -->
<div class="jump_to_raspored_busa_sidemenu">Cjenik</div>
<div class="jump_to_cjenik_sidemenu">Raspored</div>

<!-- parts -->
<div class="cjenik shown">Cjenik scroll</div>
<div class="zet_linije hidden">Zet linije</div>
<div class="zet_linije shown">Zet linije</div>
<div class="cjenik hidden">Cjenik scroll</div>

jQuery查询

$('.jump_to_raspored_busa_sidemenu').on('click',function(){
    $("html, body").animate({ scrollTop: $('.cjenik').offset().top }, 1000);
});

$('.jump_to_cjenik_sidemenu').on('click',function(){
    $("html, body").animate({ scrollTop: $('.zet_linije').offset().top }, 1000);
});

当我单击Cjenik时，scrollTop正常工作。
但是，当我单击Raspored时，它不会向下滚动。

为什么它适用于Cjenik部分，而不适合Raspored部分？

JSFiddle

最佳答案

这是因为您具有该类.zet_linije的两个元素，并且与第一个元素匹配（该元素已隐藏，因此没有offset top）。

我正在使用您的.shown类以.zet_linije类定位可见元素

尝试这个：

$('.jump_to_cjenik_sidemenu').on('click',function(){
    $("html, body").animate({ scrollTop: $('.zet_linije.shown').offset().top }, 1000);
});

演示：http://jsfiddle.net/34yGK/5/

它对您的另一个有效的原因是因为如果我们查看DOM：

<div class="cjenik shown">Cjenik scroll</div>
<div class="zet_linije hidden">Zet linije</div>
<div class="cjenik hidden">Cjenik scroll</div>
<div class="zet_linije shown">Zet linije</div>

shown项在.cjenik的DOM中排在第一位，因此当您简单地执行$(".cjenik").offset()时会得到返回，而对于zet_linije，hidden则在第一位。