とりあえず考えてみました。
━ ココから ━━━━━━━━━━━━━━━━━━━━━━━━
<!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あたりを使えばいいのかなと 感じてはいたのですが、全然見当がつきませんでした。 この部分が動けばサイトの骨格は完成間近なので 頑張って作って行きたいと思います。