如何使用Javascript來允許使用鍵盤快捷鍵在部分之間導航？

-1

我希望允許在我的博客上使用鍵盤上的j和k鍵（類似於Facebook和Tumblr使用的鍵）在帖子之間導航。如果有任何幫助，每個帖子都有自己的div類。如何使用Javascript來允許使用鍵盤快捷鍵在部分之間導航？

如何使用HTML/CSS/Javascript來做到這一點？

我試着用this blog post但是，說實話，我不知道在哪裏，即使的Javascript開始！

來源

2015-06-25 Harry Smith

監聽窗口上的按鍵。查找當前滾動位置，根據位置找到下一個/上一個部分。 – epascarello

下面是一個讓你開始的例子。 FIDDLE

幾件事情：

的因爲工作的jsfiddle時，它的加載你需要點擊「博客文章」之一，從而爲焦點窗口的方式。
K移動到下一篇文章，J移動到上一篇文章。
沒有錯誤處理。如果你嘗試過高或過低，它會崩潰並停止工作。我不得不離開你的東西去呢，對吧？ ;-)

。

jQuery的

$(document).keydown(function(e) { 
     if (e.keyCode == 74) 
     { 
      $(".current").prev().addClass("current"); 
      $(".current").eq(1).removeClass("current"); 
      $('html, body').animate({ 
       scrollTop: $(".current").offset().top 
      }, 250); 
     } 
     else if (e.keyCode == 75) 
     { 
      $(".current").next().addClass("current"); 
      $(".current").eq(0).removeClass("current"); 
      $('html, body').animate({ 
       scrollTop: $(".current").offset().top 
      }, 250); 
     } 
});

來源

2015-06-25 21:23:46 Equalsk

除了崩潰，這是完美的！ –

僅供參考，崩潰是因爲在到達結尾時沒有「下一個」div來分配值。您可以在嘗試分配值之前檢查是否有div（並且相同的後退），並且它可以工作。 – Equalsk

我可以想出這個最好的方法是使用Javascript與Html錨點。

使用Javascript來監聽特定的按鍵和按下按鍵的條件。 Html錨點將被用作javascript導航的「燈塔」。

首先閱讀錨點並瞭解它們是如何工作的。然後嘗試創建符合您的要求的JavaScript代碼並利用錨點。

來源

2015-06-25 19:35:07 BlackHawkRider

如何使用Javascript來允許使用鍵盤快捷鍵在部分之間導航？

回答

相關問題