Jump to relevant section when option from drop down is selected

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()); 
});

Looks like they are doing the same thing here: http://stackoverflow.com/a/6677069/54356 — El Guapo, Jun 26 '12 at 12:11
i meant like page jump, think of those options as anchors instead — gables20, Jun 26 '12 at 12:26

score 3 · Accepted Answer · answered Jun 26 '12 at 12:16

3

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()); 
});

answered Jun 26 '12 at 12:16

Tats_innit

33,101
9
67
75

Thank you..I really like the effect of this. Now i got to test across browser including mobile..fingers crossed – gables20 Jun 26 '12 at 12:25
@gables20 Glad it helped `:)` – Tats_innit Jun 26 '12 at 12:26

score 2 · Answer 2 · edited Nov 21 '13 at 14:57

2

use scrollto function
like $('#mydiv').scrollTo('#somethingelse');

edited Nov 21 '13 at 14:57

BenMorel

30,280
40
163
285

answered Jun 26 '12 at 12:12

khurram

878
1
12
33

This requires the scrollTo plugin – gables20 Dec 04 '12 at 17:21

score 0 · Answer 3 · answered Jun 26 '12 at 12:17

0

JQuery's scrollTo plugin can achieve this with lots of fun options.

$(document).ready(function(){
    $target = "#myDiv";

    //target, speed, easing
    $.scrollTo($target, 800, {easing:'easeInOutQuint'});
});

The Plugin

answered Jun 26 '12 at 12:17

Danny

468
2
7

Jump to relevant section when option from drop down is selected

3 Answers3