当选择从下拉菜单跳转到相关栏目

我想知道我是否可以得到一些帮助。我想要实现的是这个。当选择从下拉菜单跳转到相关栏目

一旦从选中的选项中，页面应跳转到相应的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

当选择从下拉菜单跳转到相关栏目

回答

相关问题