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();
    });
});

DEMO： 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

使用选择框滚动到页面上的位置

3 个答案: