Search code examples
javascriptjquerykeyboardarrow-keyslocation-href

how to move href using javascript

sorry for my english.

Using jquery, i want pressing keyboard arrow key to redirect to an url with href(#g) tag

I mean if downkey is pressed, how to move to #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>
Solution 
  • $(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(); 
    }
});

    the fiddle http://jsfiddle.net/BZehV/