當選擇從下拉菜單跳轉到相關欄目

我想知道我是否可以得到一些幫助。我想要實現的是這個。當選擇從下拉菜單跳轉到相關欄目

一旦從選中的選項中，頁面應跳轉到相應的div。我可以做一個警報，以確保正確的div被選擇，但我不知道如何讓頁面跳轉到相關的部分

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

來源

2012-06-26 gables20

當你說跳你的意思是滾動到該分區？ –

看起來他們正在做同樣的事情在這裏：http://stackoverflow.com/a/6677069/54356 –

我的意思是像頁面跳轉，認爲這些選項作爲錨點而不是 – gables20

演示會有細微差別，請參閱此處：http://jsfiddle.net/byRRY/5/

演示中的行爲選擇值，您將看到偏移量將轉到正確的div，隨時刪除警報。

這應有助於，

代碼

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

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

來源

2012-06-26 12:16:43

謝謝..我非常喜歡這個效果。現在我得到跨瀏覽器測試，包括mobile..fingers穿越 – gables20

@ gables20很高興它幫助'：）' –

使用scrollto功能
像$('#mydiv').scrollTo('#somethingelse');

來源

2012-06-26 12:12:28 khurram

這需要scrollTo插件 – gables20

JQuery的scrollTo插件可以有很多有趣的選擇實現這一目標。

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

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

The Plugin

來源

2012-06-26 12:17:11 Danny

當選擇從下拉菜單跳轉到相關欄目

回答

相關問題