3

私はこれが私のページのドロップダウンを選択します

<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>

そして、一緒にハックしようとしたjqueryスクリプトがあります。

    <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>

目標は、誰かがジョブを選択すると、値を選択し、ページの下のアンカーリンクに移動することです

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

うまくいけば、リフレッシュなしで。どんな助けでも大歓迎です！

4

3 に答える 3

1

この簡単なものは私のために働きます:

<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>

これで、onChange イベントを使用して関数を実行できます。

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

このような正しいリンクを提供すると、すべて正常に動作します

<div id="link"> ...

私は JavaScript に慣れていないので、しばらく時間がかかりましたが、ようやく機能する短くて簡単な解決策を見つけました。

あいさつ mz

于 2012-08-13T15:38:50.183 に答える
1

このように使用して、選択した要素までアニメーションanimateでスクロールできます。

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#select1").change(function(){
        var jump = jQuery("#select1").val();
        var new_position = jQuery('#job'+jump).offset();
        $('body, html').animate({scrollTop, jQuery('#job'+jump).offset().top})
        return false;
    });​
}
</script>
于 2012-06-21T21:51:39.867 に答える
1

使用する：

window.location.hash="someAnchor";

アンカーにジャンプする<a id="someAnchor" />

于 2012-06-21T21:52:16.760 に答える