0

ユーザーがオプションを選択すると、ページが要素までスクロールする選択ボックスを作成しようとしています。現在、私は似たようなものを持っており（選択ボックスの代わりにアンカーリンクを使用）、「要素へのスクロール」はページ位置で実行されています（要素へのスクロールではありません）。

だから、私が達成したい主なこと：

  • ユーザーが選択ボックスでオプションを選択できるようにすると、要素に「.animatescroll」されます。

これまでに得たものの例を次に示します（「ベンダーの閲覧」をクリックします）：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/

追加した：

'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...
});
于 2012-10-02T20:52:45.490 に答える