action

web技

【技k015-1】ページ内の任意の位置にジャンプする
※表組みしてページレイアウトする場合にジャンプ/表組みせず、任意の位置にジャンプ
※詳細は｢サンプル｣に記述してあります

【技k015-2】リンクしたページ内の任意の位置にジャンプする
※リンク先をオープンしたとき、そのページの指定の位置にジャンプ
※リンクされる側ファイルに< name="〜">によりジャンプする位置を記述する
※リンクするとき<a href="〜">に、ファイルのパス名の後に #に続けて上記の<a name>名を記述する
(詳細はサンプルファイルを参照して下さい)

-----次の行から(copy)-----
<a href="k015_sample.html#p2" target="_blank">サンプル</a>(サンプルの表組みの一番下にジャンプします)
<a href="k015_sample.html#p4" target="_blank">サンプル</a>(サンプルファイルの一番下にジャンプします)
-----上の行まで(copy)-----

【技k015-3-1】ウィンドウに表示する位置をjavascriptで設定する(表示位置を直接指定)
※■javascript上でページの任意位置を直接指定し、ウィンドウトップに表示させることができます

-----次の行から(copy)-----
<a href="javascript://" onclick="document.body.scrollTop='100'">100pxの位置をトップに表示</a>
<a href="javascript://" onclick="document.body.scrollTop='300'">300pxの位置をトップに表示</a>
-----上の行まで(copy)-----

【技k015-3-2】ウィンドウに表示する位置をjavascriptで設定する(top位置が可変)
※<div>〜</div>等の位置(javascriptで可変)にウィンドウのトップをジャンプします(top位置が可変)<br>

◆手順1【トップ位置の文字】(ジャンプ先)
<div>〜</div>にid属性を設定します
※style="position:absolute;top:***;"は必ず指定して下さい

-----次の行から(copy)-----
<div id ="TopPosition" style="position:absolute;left:10px;top:0px;width:100;text-align:center;background-color:#c0c0c0;">
<a href="javascript://" onclick="Top_Posi_Move()" style="text-decoration:none;"><b>[Top]</a>
</div>
-----上の行まで(copy)-----

◆手順2【スクリプトの実行】
-----次の行から(copy)-----
<a href="javascript://" onclick="Top_Posi(200)">このページの200pxの位置に文字[Top]を移動</a><br>
<a href="javascript://" onclick="Top_Posi(400)">このページの400pxの位置に文字[Top]を移動</a><br>
<a href="javascript://" onclick="Top_Posi(0)">このページの0pxの位置に文字[Top]を移動</a><br>

<a href="javascript://" onclick="Top_Posi_Move()">トップ位置変更(文字[Top]の位置にジャンプ)</a>
-----上の行まで(copy)-----

◆手順3【javascript】
-----次の行から(copy)-----
<script type="text/javascript">
<!--
//指定位置に<div>[Top]</div>を移動
function Top_Posi(h) {
　TopPosition.style.top=h;
}
//<div>[Top]</div>の位置にtop位置を移動
//検出した<div>[Top]</div>の位置Yを念のためparseInt()で数値に変換
function Top_Posi_Move(){
　Y=TopPosition.style.top;
　document.body.scrollTop=parseInt(Y);
}
//-->
</script>
-----上の行まで(copy)-----

解説等

◆表組みの中でジャンプ先を指定するのは特に問題ありませんが、表組みせずに任意の位置にジャンプするにはスタイル設定による他、｢文字を入力する｣等の若干の注意が必要です。
◆[技k015-3]はjavascript内で画面の表示位置を変更する場合に有効です。
※ウィンドウ幅を変更して表示行数等が変わった場合等、意図した位置にジャンプできないことがありますので注意が必要です。

【活用技】
◆サンプルファイルにおいて使用している｢マウスカーソルにXY座標表示を追従させる｣技は
　　[技m018]画像や文字をマウスカーソルに追従させる、を参照して下さい。
【参考技】
◆scrollTopについては
　　[技k014]マウスカーソルの位置を検出して座標表示する、を参照して下さい。

keyword

◇a name◇a href◇scrollTop

history

◇(2005.01.10)javascriptでジャンプ先を記述する技を追加
◇(2004.11.08)設置

注意

◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----