如何使用javascript移動href

使用jQuery，我想按鍵盤上的箭頭鍵來重定向到一個URL以HREF（＃G）標籤

我的意思是如果按下downkey，如何移動到#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>

來源

2013-12-21 joshua.kim

爲什麼「不能使用了window.location = '＃G'？ –

這段代碼可能不起作用，因爲有一個簡單的錯字：'witch'和'which'聽起來是一樣的，但卻是完全不同的單詞。 –

你想要這個http://stackoverflow.com/questions/3432656/scroll-to-a-div-using-jquery – tire0011

$(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-21 18:19:55 tire0011

您可以鍵入下面的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-21 19:13:55

如何使用javascript移動href

回答

相關問題