2013-10-01 35 views
0

我尝试了一些特定的步骤,以便我的页面能够通过特定的按键。滚动页面使用按键不工作使用jQuery?

<div class="navbar navbar-fixed-top"> 
<div class="navbar-inner"> 
    <div class="container"> 
     <ul id="page-navigate" class="nav"> 
      <li><a href="#A" data-link="A" class="current">A</a> 

      </li> 
      <li><a href="#B" data-link="B">B</a> 

      </li> 
      <li><a href="#C" data-link="C">C</a> 

      </li> 
      <li><a href="#D" data-link="D">D</a> 

      </li> 
     </ul> 
     </div> 
    </div> 
</div> 
<section id="A"></section> 
<section id="B"></section> 
<section id="C"></section> 
<section id="D"></section> 

所以,我试着用键来上下键使用jQuery,这样我就可以直接到达特定的部分。 守则内的jsfiddle提到:http://jsfiddle.net/coolshivster/qGjA4/2/ 我jQuery代码是:

  $(document).keyup(function (event) { 
      console.log("keyup is working"); 
      var direction = null; 
      if (event.keyCode == 40) { 
       direction = 'next'; 
      } else if (event.keyCode == 38) { 
       direction = 'prev'; 
       console.log('previous click'); 
      } 
      if (direction != null) { 
       console.log("wake up keys"); 
       $('ul#page-navigate a.current').parent()[direction]().find('a').click(); 
       var link = $('ul#page-navigate a.current').attr('data-link'); 
       console.log('link is', link); 
       $('#' + link + '').slideDown("slow"); 
      } 
     }); 
     $('ul#page-navigate').on('click','a', function() { 
      $(this).parents('ul#page-navigate').find('li').each(function() { 
       $(this).find('a').removeClass('current'); 
      }); 
      $(this).addClass('current'); 
     }); 

现在, 我试着用不同的东西喜欢直接去使用了slideDown使用部分ID的链接。 我试图点击导航栏锚点的使用click()函数。 但是,所有失败或可能是我的代码中的一些错误。

在此先感谢.. !!!

回答

1

您正在使用不正确的slideDown功能。它用于通过从0px到其正常高度的任何高度将其高度动画显示出来。这与滚动无关。

你会想要做一些像this来完成你想要做的事情。请记住,动画部分是可选的。

下面是一个简单的,非动画版:

$('html,body').scrollTop($('#' + link).offset().top) 
+0

由于它真正开始工作! 但是,如果我不使用你的代码,是否有其他方式来这样做? –