2

次の選択ボックスがあります。

 <select id="selectBox" >
 <option value="section01">section01</option>
 <option value="section02">section02</option>
 <option value="section03">section03</option>
 </select>

そして、ページには次のセクションがあります。

 <div class="page" id="section01">
  Some text here
 </div>


 <div class="page" id="section02">
  Some text here
 </div>


 <div class="page" id="section03">
  More text here
 </div>

私がやりたいことは、ユーザーにスクロール ボックスから何かを選択させ、ページを適切なセクションに自動的にスクロールさせることです。

jquery の scrollTo() メソッドを使用できると仮定していますが、選択ボックスでオプション値を取得する方法がわかりません。次に、実際に Web ページを適切な DIV セクションに移動します。

4

3 に答える 3

4

これを試して..

$(function () {
    $('#selectBox').change(function () {
        window.location.hash = '#' + $(this).val();
    });
});

デモ: http://jsfiddle.net/qJm5D/1/

于 2012-09-04T19:43:04.670 に答える
1 
$('.selectBox').change(function() {
    $(".selectBox option:selected").val();
    // Here you can trigger your scrollto function
});

コードをドキュメントの準備ができたら、動作するはずです:)

于 2012-09-04T19:43:51.057 に答える
0 
$('select').on('change', function(){
    var theDiv = $('#'+$(this).val()).offset().top;
    $('html, body').animate({
        scrollTop: theDiv
    });
});

jsFiddle

于 2012-09-04T19:45:54.453 に答える