Question

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

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

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

这是我到目前为止所得到的一个例子（点击“浏览供应商”）： 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);
        });

Answer 1

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

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

<强>加了：

您可以绑定到'change'事件，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...
});

jquery：使用选择框滚动到某个元素（如命名锚点）

1 个答案: