jQueryでページの前後への移動（変遷）をキーボードのキー操作で実装する
ウェブサイトの記事で前の記事、次の記事を素早く移動したいときに。キーボードの十字キーのところで操作できるととても楽です。リンクボタンはマウスでクリックして操作しますがファーストビューで見えない所にボタンがあったりすると。結構手間です、さくさくページを見て行きたいときはキーボードでの操作ができるとかなり楽でユーザービリティの向上につながります。今回はその機能をjQueryを使って実装する方法を紹介します。
jQueryを使って、前後のページ移動をキーボードのキーで操作できるように実装する
どのようなことを行っていくかは、コードを見ながら解説していきます、 WDG ウェブデザインギャラリーで実際のこの方法を実装していますのでDEMO代わりに御覧ください（個別の記事ページで実装しています）
jQuery (javascript)
//ページ移動のためのリンクを取得する
var prevhref = $('.prev a').attr('href');
var nexthref = $('.next a').attr('href');
//キーボードの操作をトリガーに動作する
$(window).keyup(function(e){
if(e.keyCode == 37){
if(prevhref) {
window.location.href = prevhref;
}
} else if (e.keyCode == 39) {
if(nexthref) {
window.location.href = nexthref;
}
}
});
まずは、変数 prevhrefとnexthref に前後のページへのリンクを入れます。リンクはHTMLにあるボタンからhrefにある値を取得して代入してあります。今回はHTMLタグからリンクの情報を取得していますが、直接リンク先のURLを代入しても問題ありません、無いときは空にします。
次にキーボードでの操作の部分となります、keyupのタイミングで実行するようにします。キーが押された時ではなくキーが離された時がつまり最終的な入力になるので、最後に離されたキーの情報を元に動作をさせます。
if(e.keyCode == 37) この箇所では、左の矢印のキーだった場合の動作を行います 37 というのは、キーの番号に当たります if(prevhref) では、prevhref に値がある時のみ実行するということです。もしページの最後や最初の場合は、リンクが無く空の状態になるので空の場合には何もしないという事になります
window.location.href = prevhref; この箇所で指定のURLへのページ変遷をjavascriptで実行しています。そのあとにある else if では同じようなことを next の場合の処理を行っています
COMMENT