2

对不起我的英语不好。

使用 jquery，我想按键盘箭头键重定向到带有 href(#g) 标签的 url

我的意思是如果按下下键，如何移动到 #g ？

Javascript：

$(function(e){
  $(e.witch==38)
    move #g
    //how to that?
    not use that window.location='#g';

});

html：

<div class="nav">
<input type="button" class="arrow leftarrow" value="left"/>
<input type="button" class="arrow downarrow" value="down"/>
<input type="button" class="arrow uparrow" value="up"/>
<input type="button" class="arrow rightarrow" value="right"/>

<a href="#a" id="aarrow">a</a>
<a href="#b" id="barrow">b</a>
<a href="#c" id="carrow">c</a>
<a href="#d" id="darrow">d</a>
<a href="#e" id="earrow">e</a>
<a href="#f" id="farrow">f</a>
<a href="#g" id="garrow">g</a>


<div id="a">
<p>a1</p>
<p>a2</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a1</p>
<p>a2</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
<p>a3</p>
</div>
<div id="b">
<p>b1</p>
<p>b2</p>
<p>b3</p>
<p>b1</p>
<p>b2</p>
<p>b3</p>
<p>b1</p>
<p>b2</p>
<p>b3</p>
<p>b1</p>
<p>b2</p>
<p>b3</p>
<p>b1</p>
<p>b2</p>
<p>b3</p>
<p>b1</p>
<p>b2</p>
<p>b3</p>
<p>b1</p>
<p>b2</p>
<p>b3</p>
<p>b1</p>
<p>b2</p>
<p>b3</p>
<p>b1</p>
<p>b2</p>
<p>b3</p>
<p>b1</p>
<p>b2</p>
<p>b3</p>
</div>
<div id="c">
<p>c1</p>
<p>c2</p>
<p>c3</p>
<p>c1</p>
<p>c2</p>
<p>c3</p>
<p>c1</p>
<p>c2</p>
<p>c3</p>
<p>c1</p>
<p>c2</p>
<p>c3</p>
<p>c1</p>
<p>c2</p>
<p>c3</p>
<p>c1</p>
<p>c2</p>
<p>c3</p>
<p>c1</p>
<p>c2</p>
<p>c3</p>
<p>c1</p>
<p>c2</p>
<p>c3</p>
<p>c1</p>
<p>c2</p>
<p>c3</p>
<p>c1</p>
<p>c2</p>
<p>c3</p>
<p>c1</p>
<p>c2</p>
<p>c3</p>
<p>c1</p>
<p>c2</p>
<p>c3</p>
<p>c1</p>
<p>c2</p>
<p>c3</p>
<p>c1</p>
<p>c2</p>
<p>c3</p>
</div>
<div id="d">
<p>d1</p>
<p>d2</p>
<p>d3</p>
<p>d1</p>
<p>d2</p>
<p>d3</p>
<p>d1</p>
<p>d2</p>
<p>d3</p>
<p>d1</p>
<p>d2</p>
<p>d3</p>
<p>d1</p>
<p>d2</p>
<p>d3</p>
<p>d1</p>
<p>d2</p>
<p>d3</p>
<p>d1</p>
<p>d2</p>
<p>d3</p>
<p>d1</p>
<p>d2</p>
<p>d3</p>
<p>d1</p>
<p>d2</p>
<p>d3</p>
<p>d1</p>
<p>d2</p>
<p>d3</p>
<p>d1</p>
<p>d2</p>
<p>d3</p>
<p>d1</p>
<p>d2</p>
<p>d3</p>
<p>d1</p>
<p>d2</p>
<p>d3</p>
</div>
<div id="e">
<p>e1</p>
<p>e2</p>
<p>e3</p>
<p>e1</p>
<p>e2</p>
<p>e3</p>
<p>e1</p>
<p>e2</p>
<p>e3</p>
<p>e1</p>
<p>e2</p>
<p>e3</p>
<p>e1</p>
<p>e2</p>
<p>e3</p>
<p>e1</p>
<p>e2</p>
<p>e3</p>
<p>e1</p>
<p>e2</p>
<p>e3</p>
<p>e1</p>
<p>e2</p>
<p>e3</p>
<p>e1</p>
<p>e2</p>
<p>e3</p>
<p>e1</p>
<p>e2</p>
<p>e3</p>
<p>e1</p>
<p>e2</p>
<p>e3</p>
<p>e1</p>
<p>e2</p>
<p>e3</p>
<p>e1</p>
<p>e2</p>
<p>e3</p>
<p>e1</p>
<p>e2</p>
<p>e3</p>
</div>
<div id="f">
<p>f1</p>
<p>f2</p>
<p>f3</p>
<p>f1</p>
<p>f2</p>
<p>f3</p>
<p>f1</p>
<p>f2</p>
<p>f3</p>
<p>f1</p>
<p>f2</p>
<p>f3</p>
<p>f1</p>
<p>f2</p>
<p>f3</p>
<p>f1</p>
<p>f2</p>
<p>f3</p>
<p>f1</p>
<p>f2</p>
<p>f3</p>
<p>f1</p>
<p>f2</p>
<p>f3</p>
<p>f1</p>
<p>f2</p>
<p>f3</p>
<p>f1</p>
<p>f2</p>
<p>f3</p>
<p>f1</p>
<p>f2</p>
<p>f3</p>
<p>f1</p>
<p>f2</p>
<p>f3</p>
<p>f1</p>
<p>f2</p>
<p>f3</p>
<p>f1</p>
<p>f2</p>
<p>f3</p>
</div>
<div id="g">
<p>g1</p>
<p>g2</p>
<p>3g</p>
<p>g1</p>
<p>g2</p>
<p>3g</p>
<p>g1</p>
<p>g2</p>
<p>3g</p>
<p>g1</p>
<p>g2</p>
<p>3g</p>
<p>g1</p>
<p>g2</p>
<p>3g</p>
<p>g1</p>
<p>g2</p>
<p>3g</p>
<p>g1</p>
<p>g2</p>
<p>3g</p>
<p>g1</p>
<p>g2</p>
<p>3g</p>
<p>g1</p>
<p>g2</p>
<p>3g</p>
<p>g1</p>
<p>g2</p>
<p>3g</p>
<p>g1</p>
<p>g2</p>
<p>3g</p>
<p>g1</p>
<p>g2</p>
<p>3g</p>
<p>g1</p>
<p>g2</p>
<p>3g</p>
<p>g1</p>
<p>g2</p>
<p>3g</p>
<p>g1</p>
<p>g2</p>
<p>3g</p>
</div>


</div>
4

2 回答 2

1 
$(document).bind('keydown',function(e){
    console.log('key down');
    console.log(e.keyCode);
    if(e.keyCode === 38)
    {
       console.log('key 38');
       $('#g')[0].scrollIntoView(true);
       e.preventDefault(); 
    }
});

小提琴 http://jsfiddle.net/BZehV/

于 2013-12-21T18:19:55.327 回答
0

您可以键入以下 jquery 代码：

$(document).ready(function() {
  $(document).bind('keydown',function(event){
    if(event.keyCode == 38){
      $("html, body").animate({scrollTop: $("#g").offset().top}, 1000); 
    }
  });
});


或者您可以构建自己的插件，在任何地方使用它：
创建一个文件并将其重命名为jquery.goto.js，然后输入：

(function($) {
    $.fn.goTo = function() {
        $('html, body').animate({
            scrollTop: $(this).offset().top + 'px'
        }, 'fast');
        return this; // for chaining...
    }
})(jQuery);


现在使用您的插件将其包含到您的页面中

<script src="js/jquery.goto.js"></script>


滚动到某个元素：

$('#g').goTo();


就是这样，祝你好运

于 2013-12-21T19:13:55.927 回答