jquery - 使用选择框滚动到页面上的某个位置

Question

我有以下选择框：

 <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() 方法——但我不确定如何在选择框中获取选项值——然后将网页实际向下移动到正确的 DIV 部分。

Answer 1

尝试这个..

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

演示：http: //jsfiddle.net/qJm5D/1/

Answer 2

$('.selectBox').change(function() {
    $(".selectBox option:selected").val();
    // Here you can trigger your scrollto function
});

将代码放入准备好的文档中，它应该可以工作:)

Answer 3

$('select').on('change', function(){
    var theDiv = $('#'+$(this).val()).offset().top;
    $('html, body').animate({
        scrollTop: theDiv
    });
});

jsFiddle