0

我正在尝试制作一个选择框，当用户选择一个选项时，页面将滚动到该元素。现在我有类似的东西（使用锚链接而不是选择框）并且“滚动到元素”是通过页面位置完成的（而不是通过滚动到元素）。

所以，我想要完成的主要事情：

  • 让用户在选择框中选择一个选项，它将“.动画滚动”到一个元素。

这是我到目前为止得到的一个例子（点击“浏览供应商”）： http: //oneillwebs.com/coburns/vendors/

html:

   <!-- Click links to scroll element -->
   <ul>
     <li><a href="#" id="A">A</a></li>
     <li><a href="#" id="B">B</a></li>
     <li><a href="#" id="C">C</a></li>
   </ul>


   <!-- Div that holds the information thats scrolled to -->
   <div class="vendor-links">
      <nav class="a">
        <h3>A</h3>
        <ul class="float">
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </nav>

      <nav class="b">
        <h3>B</h3>
        <ul class="float">
          <li><a href="http://www.coburns.com" target="iframe">Coburn's</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </nav>

      <nav class="c">
        <h3>C</h3>
        <ul class="float">
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </nav>
  </div>

jQuery：

    // Scroll to element
        $("#A").click(function() {
            $('.vendors-links').animate({ scrollTop:10 }, 1000);
        });

        $("#B").click(function() {
            $('.vendors-links').animate({ scrollTop:200}, 1000);
        });

        $("#C").click(function() {
            $('.vendors-links').animate({ scrollTop:400 }, 1000);
        });
4

1 回答 1

2

有一个很好的插件可以做到这一点：https ://github.com/flesler/jquery.scrollTo

可以在此处找到演示：http: //demos.flesler.com/jquery/scrollTo/

添加：

您可以绑定到“更改”事件 f.ex。带有类似的标记

  <select>
    <option value="" selected>Select something...</option>
    <option value=a>A</option>
    <option value=b>B</option>
  </select>

你可以做

​$("select").change(function() {
    var v = $(this).val();
    if(v)
        ...scroll to v...
});
于 2012-10-02T20:52:45.490 回答