Question

我有两个divs，每个classes，隐藏和显示（响应式网络需要这些类）。< / p>

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

Answer 1

这是因为你有两个元素.zet_linije，它匹配第一个（隐藏所以它没有offset top）。

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

试试这个：

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

DEMO：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的DOM中，.cjenik项目第一，因此只需执行$(".cjenik").offset() 而即可返回对于zet_linije，hidden首先出现。

Answer 2

它正在发挥作用。 jQuery无法区分隐藏的div和显示的div。你需要像这样动画

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

请参阅此处http://jsfiddle.net/34yGK/3/

它适用于两个链接。只是.cjenik链接在HTML

中更高

为什么JQuery scrollTop（）不起作用

2 个答案: