为什么 JQuery scrollTop() 不起作用答案

【问题标题】：Why JQuery scrollTop() won't work为什么 JQuery scrollTop() 不起作用
【发布时间】：2013-03-28 17:11:25
【问题描述】：

我有两个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

【问题讨论】：

那是因为选择器$('.zet_linije')匹配多个元素。
通过在点击时记录offset().top 开始调试，看看它返回什么？ on('click',function(){ console.log( $('.cjenik').offset().top); ... })
@Martin $('.cjenik') 也是如此，但它确实有效。
它得到.zet_linije集合中的第一个元素，并且返回0的偏移量。瞄准最后一个，见FIDDLE

标签： jquery scrolltop

【解决方案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);
});

演示：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 中是 first，因此当您简单地执行 $(".cjenik").offset() 时会返回该项目而对于 zet_linije， hidden 先到先得。

【讨论】：

也可以使用$('.zet_linije:visible')
@Vucko 因为.cjenik 上的shown 项是before HTML 结构中隐藏的一项。 .zet_linije 的情况并非如此。
@lordvlad 我们可以，但我们不妨使用他已经在使用的类。
@mattytommo 所以 HTML 是问题所在。傻我。 $('.zet_linije.shown')（选择器）是什么意思？它选择<div class="zet_linije shown">... 或<div class="zet_linije><div class="shown">..." ?
@Vucko 由于没有空格，这意味着一个元素具有两个类。所以<div class="zet_linije shown">

【解决方案2】：

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

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

请看这里http://jsfiddle.net/34yGK/3/

它对两个链接都有效。只是 .cjenik 链接在 HTML 中更高

【讨论】：