使用jQuery鏈接下拉列表來錨文本

我這個選擇下拉我的網頁使用jQuery鏈接下拉列表來錨文本

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

希望沒有刷新。任何幫助，將不勝感激！

來源

2012-06-21 Will English IV

這簡單的一爲我工作：

<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-13 15:38:50

您可以使用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-21 21:51:39 Blaster

使用：

window.location.hash="someAnchor";

跳轉到錨<a id="someAnchor" />

來源

2012-06-21 21:52:16 yankee

使用jQuery鏈接下拉列表來錨文本

回答

相關問題