Question

I was wondering if i could get some help. What i am trying to achieve is this.

Once an option from the selected, the page should jump to the corresponding div. I am able to do an alert to make sure the right div is selected but i do not know how to make the page jump to the relevant section

<div class="nav">
    <div class="top-nav">           
        <form action="#">
            <select>
                <option value="ten">10</option>
                <option value="twenty">20</option>
                <option value="thirty">30</option>
            </select>   
        </form>     
    </div>
</div>


<div class="area">          
    <div id="ten">Alot of content goes in here</div>
    <div id="twenty">Alot of content goes in here</div>
    <div id="thirty">Alot of content goes in here</div>
</div>



$('.top-nav').children().children('select').bind('change', function () {        
    alert($('#' + $(this).val()).html()); 
}); 

Answer 1

demo there will be slight difference see here: http://jsfiddle.net/byRRY/5/

Behavior in demo select the value and you will see the offset will go to correct div, feel free to remove alert.

This should help,

code

$('.top-nav').children().children('select').bind('change', function () {  
  $("html, body").animate({scrollTop: $('#' + $(this).val()).offset().top}, "slow");

    alert($('#' + $(this).val()).html()); 
}); 
​