多分javascriptについての質問です｡h1,h2,h3と見出しが入っているHTMLﾌｧｲﾙ内で､accesskey(alt+上下矢印とか)を使ってｼﾞｬﾝﾌﾟ機能を持たせたい｡powerpointのﾌﾟﾚｾﾞﾝみたいに､ｷｰを押すと､次の見出しへと飛んでいく感じです｡(他のﾍﾟｰｼﾞに飛ぶのでは無く､固定のﾍﾟｰｼﾞ内で下へ下へと飛ばしたい)｡<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 で逆順) で巡回できますが､その項目がﾍﾟｰｼﾞのﾄｯﾌﾟに来ないのでいまいちかも｡
shortcuts.js を使えばｷｰﾎﾞｰﾄﾞｼｮｰﾄｶｯﾄを実装できます｡
http://www.openjs.com/scripts/events/keyboard_shortcuts/
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>
できることはできますがもっと効率よくできる方法があるかもしれません｡
ただ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
