スクロールバーの位置指定

解決済

質問者：noname#40724
質問日時：2007/10/10 15:48
回答数：1件

OS情報：MacOSX
ブラウザ情報：Safari
今作成中のホームページの左側にボックスをつくってその中にクリックすると別ページに飛ぶリンクを縦に並べています。ボックス内はCSSでオーバーフロー自動の設定にしているので、下の方のリンクはスクロールしなければ見えません。今の状態は見えているリンクをクリックして別ページに飛ぶ分にはいいのですが、スクロールしてリンクをクリックした場合、別ページに移動した時、またスクロールがトップの位置に戻ってしまいます。これだとそれ以下にあるリンクをクリックしたい時に、いちいち下方向にスクロールしながらでないといけません。そこで、クリックして移動した後、そのページのリンク名が表示される位置でスクロールバーを固定できないか…ということなのですが、何かよい方法はないでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： steel_gray
回答日時：2007/10/10 18:35

Javascriptで。

画面のロード終了時に指定したidの要素までスクロール位置をずらすサンプルです。

Win版のSafari3で試したのでたぶんMac版Safariでも大丈夫だと思います。

<html>
<head>
<title></title>
<style type="text/css">
#LINKBLOCK{
position:relative;/*リンクの相対位置を得るのに必要！*/
/*後はテスト用に適当*/
width:5em;
height:5em;
overflow:auto;
border:solid 1px black;
}
p{padding-top:8em;}
</style>
<script type="text/javascript">
function linkScroll(linkId){
var obj = document.getElementById(linkId);
var block = document.getElementById('LINKBLOCK');
block.scrollTop = obj.offsetTop;

}
</script>
</head>
<body onload="linkScroll('LINK1')">

<div id="LINKBLOCK">
<p><a href="～～" id="LINK1">リンク</a></p>
<p><a href="～～" id="LINK2">リンク</a></p>
</div>

</body>
</html>