1

何か助けてもらえないだろうかと考えていました。私が達成しようとしているのはこれです。

選択したオプションから、ページは対応する div にジャンプする必要があります。適切な div が選択されていることを確認するアラートを実行できますが、ページを関連するセクションにジャンプさせる方法がわかりません 

<div class="nav">
    <div class="top-nav">           
        <form action="#">
            <select>
                <option value="ten">10</option>
                <option value="twenty">20</option>
                <option value="thirty">30</option>
            </select>   
        </form>     
    </div>
</div>


<div class="area">          
    <div id="ten">Alot of content goes in here</div>
    <div id="twenty">Alot of content goes in here</div>
    <div id="thirty">Alot of content goes in here</div>
</div>



$('.top-nav').children().children('select').bind('change', function () {        
    alert($('#' + $(this).val()).html()); 
});
4

3 に答える 3

3

デモにはわずかな違いがあります。ここを参照してください: http://jsfiddle.net/byRRY/5/

デモの動作で値を選択すると、オフセットが正しい div に移動することがわかります。アラートを自由に削除してください。

これは役立つはずです、

コード

$('.top-nav').children().children('select').bind('change', function () {  
  $("html, body").animate({scrollTop: $('#' + $(this).val()).offset().top}, "slow");

    alert($('#' + $(this).val()).html()); 
}); 
​
于 2012-06-26T12:16:43.170 に答える
2


次のようなscrollto関数を使用します$('#mydiv').scrollTo('#somethingelse');

于 2012-06-26T12:12:28.877 に答える
0

JQuery の scrollTo プラグインは、多くの楽しいオプションでこれを実現できます。

$(document).ready(function(){
    $target = "#myDiv";

    //target, speed, easing
    $.scrollTo($target, 800, {easing:'easeInOutQuint'});
});

プラグイン

于 2012-06-26T12:17:11.990 に答える