- ベストアンサー
ボタンによるページ内移動２
こちらで質問した者ですが、質問内容が悪かったようで こちらの意図が伝わってないので再質問します。 http://okwave.jp/qa/q7054350.html CSSによる疑似フレームでヘッダー部に２つ▲と▼の ボタンがjpg画像にて用意しています。 メインコンテンツがやや長くなるのでEX1～EX10ぐらいまで 連番でIDを割り振る予定でいます。 そこでヘッダー部のボタンで直近のIDに移動したいのですが そのコードがどのようになるかお聞きします。
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
とりあえず考えてみました。 ━ ココから ━━━━━━━━━━━━━━━━━━━━━━━━ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>TEST-01</title> <style type="text/css"><!-- div.header { width: 100px; height: 30px; margin: 0; padding: 0; position: fixed; top: 0px; right: 0px; } div.header form#page-navi-inner input { width: 20px; margin: 0; padding: 0; } div.main { clear: both; } div.main div { margin-bottom: 300px; } --></style> </head> <body> <div class="main"> <div id="name1">OKWaveは素敵な質問箱1。</div> <div id="name2">OKWaveは素敵な質問箱2。</div> <div id="name3">OKWaveは素敵な質問箱3。</div> <div id="name4">OKWaveは素敵な質問箱4。</div> <div id="name5">OKWaveは素敵な質問箱5。</div> <div id="name6">OKWaveは素敵な質問箱6。</div> <div id="name7">OKWaveは素敵な質問箱7。</div> </div> <div class="header"> <form id="page-navi-inner"> <input type="button" id="btn-up" value="↑" onClick="my_page_navi_inner(1);"></input> <input type="button" id="btn-down" value="↓" onClick="my_page_navi_inner(2);"></input> </form> </div> <script type="text/javascript"><!-- function my_page_navi_inner(val_mybutton) { var my_scrolltop = document.documentElement.scrollTop || document.body.scrollTop; //現在位置 var n = 1, cnt = 0, my_id = '', val_mytop = false, ary_mytop = []; //各種変数配列を初期化 /* 現在位置との差分を取得し,配列に格納. */ while ( val_mytop = document.getElementById('name'+n) ) { val_mytop = eval( val_mytop.offsetTop - my_scrolltop ); ary_mytop.push( val_mytop ); n++; cnt++; } /* '↑'の時: 配列を昇順で取得代入,値が正になったら終了. */ if ( val_mybutton == 1 ) { for ( var i=0; i<cnt; i++ ) { if ( eval(ary_mytop[i]) <= 0 ) { my_id = '#name'+ eval(i+1); } else { continue; } } } /* '↓'の時: 配列を降順で取得代入,値が負になったら終了. */ else { for ( var i=cnt-1; i>0; i-- ) { if ( eval(ary_mytop[i]) > 0 ) { my_id = '#name'+ eval(i+1); } else { continue; } } } /* 最終的なページ内遷移処理 */ window.location.hash = my_id; return false; } //--></script> </body> </html> ━ ココまで ━━━━━━━━━━━━━━━━━━━━━━━━ JavaScriptの基本が分っているのなら、コードを読んで貰えれば大体分ると思います（Chromeのみで動作確認）。 P.S. 小賢しいテクニックとしては、 ・<div class="header"> と <script> を、メインの後から読み込む様にHTMLコードを記述 ～という点でしょうか？ こうする事により、まだページが読み込み途中にボタンを押されても、エラーが出ない様に物理的記述で対処してます(笑)。
お礼
とてもご丁寧に有り難うございます。 こんな立派なものを見せられると溜息が出ますね。 うまくいくかどうかも分かってなかったのですが、 何か方法があるのかなとも思っていました。 windows.locationあたりを使えばいいのかなと 感じてはいたのですが、全然見当がつきませんでした。 この部分が動けばサイトの骨格は完成間近なので 頑張って作って行きたいと思います。