how to move href using javascript [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 8 years ago.

Improve this question

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>

Answer 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(); 
    }
});

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

Answer 2

You can type the following jquery code:

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

OR you can build your own plugin, to use it everywhere you want:
create a file and rename it to jquery.goto.js , then type:

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

Now to use your plugin include it to your page

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

to scroll to some element:

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

That's it, Good luck