如何使用javascript移动href_Javascript_Jquery_Keyboard_Arrow Keys_Location Href

如何使用javascript移动href

javascript jquery keyboard

如何使用javascript移动href,javascript,jquery,keyboard,arrow-keys,location-href,Javascript,Jquery,Keyboard,Arrow Keys,Location Href,对不起我的英语使用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="a

对不起我的英语

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


a1
a2
a3
a3
a3
a3
a3
a3
a3
a3
a3
a3
a3
a3
a3
a3
a3
a1
a2
a3
a3
a3
a3
a3
a3
a3
a3
a3
a3
a3
a3
a3
a3
a3
b1
b2
b3
b1
b2
b3
b1
b2
b3
b1
b2
b3
b1
b2
b3
b1
b2
b3
b1
b2
b3
b1
b2
b3
b1
b2
b3
b1
b2
b3
c1
c2
c3
c1
c2
c3
c1
c2
c3
c1
c2
c3
c1
c2
c3
c1
c2
c3
c1
c2
c3
c1
c2
c3
c1
c2
c3
c1
c2
c3
c1
c2
c3
c1
c2
c3
c1
c2
c3
c1
c2
c3
d1
d2
d3
d1
d2
d3
d1
d2
d3
d1
d2
d3
d1
d2
d3
d1
d2
d3
d1
d2
d3
d1
d2
d3
d1
d2
d3
d1
d2
d3
d1
d2
d3
d1
d2
d3
d1
d2
d3
e1
e2
e3
e1
e2
e3
e1
e2
e3
e1
e2
e3
e1
e2
e3
e1
e2
e3
e1
e2
e3
e1
e2
e3
e1
e2
e3
e1
e2
e3
e1
e2
e3
e1
e2
e3
e1
e2
e3
e1
e2
e3
f1
f2
f3
f1
f2
f3
f1
f2
f3
f1
f2
f3
f1
f2
f3
f1
f2
f3
f1
f2
f3
f1
f2
f3
f1
f2
f3
f1
f2
f3
f1
f2
f3
f1
f2
f3
f1
f2
f3
f1
f2
f3
g1
g2
3g
g1
g2
3g
g1
g2
3g
g1
g2
3g
g1
g2
3g
g1
g2
3g
g1
g2
3g
g1
g2
3g
g1
g2
3g
g1
g2
3g
g1
g2
3g
g1
g2
3g
g1
g2
3g
g1
g2
3g
g1
g2
3g

小提琴

您可以键入以下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>

就是这样，祝你好运

为什么“不使用该窗口。location='#g'？这个代码可能不起作用，因为一个简单的输入错误：

witch

和

听起来相同，但却是非常不同的词。你想要这个吗
<script src="js/jquery.goto.js"></script>

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