1

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

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

4

2 回答 2

3

这是因为该类有两个元素，.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项目在 DOM 中是第一个.cjenikfor ，因此当您简单地执行此操作时会返回该项目，$(".cjenik").offset() 而for是zet_linije第hidden一个。

于 2013-03-28T09:11:12.210 回答
2

这是工作。jQuery 无法区分隐藏的 div 和显示的 div。你需要像这样制作动画

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

见这里http://jsfiddle.net/34yGK/3/

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

于 2013-03-28T09:11:25.980 回答