多分javascriptについての質問です。h1,h2,h3と見出しが入っているHTMLファイル内で、accesskey(alt+上下矢印とか)を使ってジャンプ機能を持たせたい。powerpointのプレゼンみたいに、キーを押すと、次の見出しへと飛んでいく感じです。(他のページに飛ぶのでは無く、固定のページ内で下へ下へと飛ばしたい)。


技術的に可能でしょうか?可能だとすれば、どのように作れば良いでしょうか。javascriptを使わなくても出来るなら尚良しです。※個人的には、それをpukiwikiと組み合わせたいです。

参考:私はよく分かりませんでしたが似たようなことを考えている方がいました
http://d.hatena.ne.jp/gifnksm/20081007/1223366687

ご教示下さい。よろしくおねがいします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/09/11 16:50:34
  • 終了:2012/09/18 16:55:03

回答(4件)

id:HowAreYou No.1

HowAreYou回答回数91ベストアンサー獲得回数172012/09/11 17:52:50

ポイント25pt
<h1 tabindex="1">h1</h1>
  <p>hogehoge</p>

<h2 tabindex="2">h2</h2>
  <p>fugafuga</p>

<h3 tabindex="3">h3</h3>
  <p>mogamoga</p>

tabindex を指定してやると tabキー (shift + tab で逆順) で巡回できますが、その項目がページのトップに来ないのでいまいちかも。

id:freewriter

なるほどーー
仰る通りページのトップには来ないので、今回の目的には使わないと思いますが、知らなかったので勉強になりました。ありがとうございます!

2012/09/11 18:27:08
id:oil999 No.2

oil999回答回数1728ベストアンサー獲得回数3202012/09/11 18:01:01

ポイント25pt

shortcuts.js を使えばキーボードショートカットを実装できます。
http://www.openjs.com/scripts/events/keyboard_shortcuts/

id:freewriter

ありがとうございます。

そのショートカットをつかって、

を画面のトップに持ってきたいんですけど、それはどうしたらいいかご存じでしょうか。ぜひご教示ください。 2012/09/11 18:27:58
id:Cherenkov No.3

Cherenkov回答回数1503ベストアンサー獲得回数4932012/09/12 00:01:59

ポイント25pt

jquery, shortcuts.jsを使ってサンプルを書いてみました。pukiwikiの場合は#body [id^="content"]を対象に含めればよさげです。
http://jsfiddle.net/cherenkov/q7NHv/

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js" type="text/javascript"></script>
<script>
function init() {
	var targetSelector = 'h2';
	//pukiwiki:
	//var targetSelector = '#body [id^="content"]';
	shortcut.add("up", function() {
		var prev;
		var current = $('.shortcut_pos');
		if (current.length) {
			current.removeClass('shortcut_pos');
			prev = current.prevAll(targetSelector).eq(0).addClass('shortcut_pos');
			if (prev.length) {
				prev = prev.eq(-1).addClass('shortcut_pos');
			} else {
				prev = $(targetSelector).eq(-1).addClass('shortcut_pos');
			}
		} else {
			prev = $(targetSelector).eq(-1).addClass('shortcut_pos');
		}
		window.scroll(0, prev.position().top);
	});
	shortcut.add('down', function() {
		var next;
		var current = $('.shortcut_pos');
		if (current.length) {
			current.removeClass('shortcut_pos');
			next = current.nextAll(targetSelector);
			if (next.length) {
				next = next.eq(0).addClass('shortcut_pos');
			} else {
				next = $(targetSelector).eq(0).addClass('shortcut_pos');
			}
		} else {
			next = $(targetSelector).eq(0).addClass('shortcut_pos');
		}
		window.scroll(0, next.position().top);
	});
}
$(function() {
	init();	
});
</script>
</head>
<body>
<h2>11111</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2>22222</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2>33333</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2>44444</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2>55555</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
id:freewriter

ありがとうございます。
「pukiwikiの場合は#body [id^="content"]を対象に含める」という意味が分からないのですが、ご説明頂いてよろしいでしょうか

2012/09/18 09:04:45
id:Cherenkov

無理にテンプレートをいじっていない標準的なpukiwikiで、
var targetSelector = 'h2';でh2としているセレクタを#body [id^="content"]にすると、目的の動作になるかと。

2012/09/18 09:25:22
id:maya70828 No.4

楽1978回答回数1364ベストアンサー獲得回数1392012/09/17 22:30:38

ポイント25pt

できることはできますがもっと効率よくできる方法があるかもしれません。
ただjqueryなどは使わずにできます。
Tabキー(IEの場合)またはShift+Tabキーを押すと見出しに飛びます。
説明するとダミーリンクを作って、フォーカスした時に指定タグに飛ぶようにJavascriptで書いています。
Ctrl+矢印キーでも一応動きますが、使う場合は下記リンクからダウンロードしてスクリプトファイルを読み込んで使ってください。
ちなみに下記ファイルを使うとどのブラウザでもCtrl+矢印キーでフォーカスを選択することができます。
http://www.keynavi.net/ja/idev.html

<!DOCTYPE html>
<html>
<head>
<title>テスト</title>
<style type="text/css">
<!--
.white {filter: alpha(opacity=0);
	-moz-opacity:0.0;
	opacity:0.0;
	z-index:1;
	position: absolute; top:20px; 	
}
-->
</style>
<script type="text/javascript">
<!--
var objPageScrollTimer;	// タイマーオブジェクト
var intPageScrollTimerInterval = 5;	// 移動時間間隔(ms)
var intPageScrollRate = 5;	// 移動する距離割合(現在位置から目的地までの○○%分移動させる)
var intPageScrollGoalTop;	// 目的のY座標//ページ内の指定したID属性のタグまでスクロールする
function pageScroll(objID){// タイマー初期化
	if (objPageScrollTimer) clearInterval(objPageScrollTimer);
	if(document.getElementById(objID)){// 目的の要素までのY座標を取得
	var objBounds = document.getElementById(objID).getBoundingClientRect();
	intPageScrollGoalTop = objBounds.top;	// タイマーセット
	objPageScrollTimer = setInterval("pageScrolling()", intPageScrollTimerInterval);
}
	return false;
}
function pageScrolling(){	// 現在のY座標を取得
	var intNowY = document.documentElement.scrollTop || document.body.scrollTop;	// 移動距離を計算
	scrollLength = Math.ceil((intPageScrollGoalTop - intNowY) * (intPageScrollRate/100));	// スクロールの移動
	scrollBy(0, scrollLength);	// 移動後のY座標を取得
	var intNewY = document.documentElement.scrollTop || document.body.scrollTop;	// 目的の座標を越えるか移動後の座標変化がない場合はタイマー停止
	if (intPageScrollGoalTop <= intNowY || intNewY == intNowY){
	objPageScrollTimer = clearInterval(objPageScrollTimer);
}
}
// -->
</script>
</head>
<body>
<script type="text/javascript" src="http://www.keynavi.net/files/keynavi_ja.js" ></script>
<a href="#" class="white" onfocus="pageScroll('point1')">○</a><a href="#" class="white" onfocus="pageScroll('point2')">○</a>
<h1 id="point1">見出し</h1>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h2 id="point2">見出し</h2>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

参考URL
http://jsdo.it/cojicoji.gray/dgdA
http://www.jidaikobo.com/main/read/content_id/21

id:freewriter

ありがとうございます!

2012/09/18 21:31:27

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません