ボタンによるページ内移動

質問

id属性でスタイルを宣言するとaタグでページ内に
リンクを張ることができます。

このidがEX1～EX10とか連番になっていて
今、自分がどこにいるかは分かりません。
EX6とEX7の間にいるとして
ボタンの↑を押せばEX6に↓を押せばEX7に
というように任意に飛ばす方法はありますか。

考えてみたけどさっぱり分かりません。

回答No.2

JaneDue · ベストアンサー

通常なら
<input type='button' value='▲' onClick="location.hash='EX6'">
とかでしょうが、文脈からして「ボタン」というのはキーボードの↑↓のことでしょうか?

とすれば流れとしては
1.押されたキーコードを調べる
2.現在の真ん中あたり? のy座標を取得
3.EX1～EX10の y座標と比較して、↑↓によって 前後に移動
という感じになるかと。

1.は以下が参考になれば。
document.onkeydown = checkKeycode;
function checkKeycode(e){
var keycode = window.event ? window.event.keyCode: e.which;
if(keycode === 38){
alert("上へまいります");
//goto('up');
}else if(keycode === 40){
alert("下へまいります");
//goto('down');
}
}

あとは関数goto()を作成して 2,3を実行します。
(特に座標系はブラウザ毎に異なることが多いので要注意です)

お礼

ご回答どうもです。3番のイメージです。
ボタンというのはjpgのボタンで、
その部分のHTMLの準備はできています。

キーボードのカーソルキーを予想されるとは
全然考えていませんでした。

checkkeycodeとかも全然知りませんでした。
中身を見ているとgotoだけでも
行けそうな気がしていますが、どんなものでしょう？

こちらでも調べてみますが、
知らないことだらけで本当に困ったちゃんです。

回答No.4

JaneDue

>ボタンはヘッダーに２つ置いてます。
???
ヘッダが見えているということは、ページの上部ということですよね?
ボタンが必要と思われるページの中～下部では使えませんよ??? 　また一度アンカーに飛んでしまうと、自分でヘッダーまで戻らないとボタンが見えない・・・?? 。
申し訳ない。いまひとつよく分からないので、もっと詳しい方の回答を待ってみてください。

お礼

こんなに色々な解釈されるとは驚きましたよ。
もう一度整理して質問します。
ご協力有り難うございました。

回答No.3

JaneDue

画像ボタンでしたら、表示したい場所に画像を置いて、リンクをはるだけでOKです。(JavaScript不要)　リンク先は, idの前に # をつけるとページ内リンク(アンカーといいます)になるので、以下のような感じ。

<a href="#EX6" alt='戻る'><img src='▲ボタン画像.jpg'></a>
<a href="#EX7" alt='次へ'><img src='▼ボタン画像.jpg'></a>

お礼

それは前もって位置が分かる場合ですよね？
ボタンはヘッダーに２つ置いてます。
その２つの上下で#EX1～#EX10まで
今いる位置から一番近いところに移動したいんです。

No2の方の返信でも書きましたが
y座標と比較する必要があります。

回答No.1

kiflmac

その部分って、Java Scriptで作らなくても、XHTMLを使えばかなり簡単な話ですが、何か制約でもあるので無いでしょうか？

補足

XHTMLなんて知らないので全然簡単ではありません。