Question

I this select dropdown on my page

<select id="select1" size="1" style="background-color:#FFFFD7">
<option>Choose a Position</option>
<option value="1">Job!</option>
<option value="2">Job!</option>
<option value="3">Job!</option>
<option value="4">Job!</option>
<option value="5">Job!</option>
<option value="6">Job!</option>
<option value="7">Job!</option>
<option value="8">Job!</option>
<option value="9">Job!</option>
</select>    

And I have a jquery script that I tried to hack together.

    <script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#select1").change(function(){
            var jump = jQuery("#select1").val();
            var new_position = jQuery('#job'+jump).offset();
            window.scrollTo(new_position.left,new_position.top);
            return false;
        });​
    }
    </script>

The goal is once someone selects the job, it goes to select a value, it goes to an anchor-link
down the page

<a href="job1"></a> 

Hopefully without a refresh. Any help would be appreciated!

Answer 1

This easy one workes for me :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
<script type="text/javascript">
    function scrollTo(target){
        var targetPosition = $(target).offset().top;
        $('html,body').animate({ scrollTop: targetPosition}, 'slow');
    }
</script>

Now you can use the onChange event to to execute the function:

<select name="dropdpown" size="1" onChange="scrollTo(this.value)">
    <option value="#link">text</option>
</select>

If you provide a correct link like this everything works fine

<div id="link"> ...

It took me a while because I am not used to javascript, but finally found a short and easy solution that works.

Greetiing mz