Question

I’m attempting to make a select box that when a user selects an option, the page will scroll to the element. Right now I have something similar (with anchor links instead of a select box) and the “scroll to element” is being done with page position (not by scrolling to the element).

So, the main thing I want to accomplish:

• Let user select an option in a select box and it will “.animate scroll” to an element.

Here’s an example of what i got so far (click on “browse vendors”):
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

There is a nice plugin that does just that: https://github.com/flesler/jquery.scrollTo

A demo can be found here: http://demos.flesler.com/jquery/scrollTo/

Added:

You can bind to the ‘change’ event, f.ex. with a markup like

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

you can do

​$("select").change(function() {
    var v = $(this).val();
    if(v)
        ...scroll to v...
});