1

私には 2 つdivsあり、それぞれclassesにhiddenとshownの 2 つがあります(レスポンシブ 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

4

2 に答える 2

3

これは、そのクラスに 2 つの要素があり.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項目はfor の DOM の最初にあるため、単純.cjenikに実行すると返されますが、forでは項目が最初に来ます。$(".cjenik").offset() zet_linijehidden

于 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 に答える