html スクロールの位置を指定する

お世話になります。

webサイトを作成していて、ページを読みこんだ際に自動的に目的の位置までスクロールを進めたいと思っています。

現在作成したhtml<test.html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="expires" content="0" />


<script type="text/javascript">
window.onload = function () {
    document.getElementById( "scrollbox" ).onscroll = function(){
        getTheScrollPosition( this );
    };
}
function getTheScrollPosition( $event ) {
    var $scrollTopRatio = Math.round( $event.scrollTop / ( $event.scrollHeight - $event.clientHeight ) * 100 );

    document.getElementById( "scrollTopOutput" ).innerHTML = $scrollTopRatio + "%";

}
</script>

    <div id = "scrollbox";  style="overflow-y: scroll; height:100px;">
        
        テスト1<br>
        テスト2<br>
        テスト3<br>
        テスト4<br>
        テスト5<br>
        テスト6<br>
        テスト7<br>
        テスト8<br>
        テスト9<br>
        テスト10<br>
        テスト11<br>
        テスト12<br>
        テスト13<br>
        テスト14<br>
        テスト15<br>
        テスト16<br>
        テスト17<br>
        テスト18<br>
        テスト19<br>
        テスト20<br>
        テスト21<br>
        テスト22<br>
        テスト23<br>
        テスト24<br>
        テスト25<br>
        テスト26<br>
        テスト27<br>
        テスト28<br>
        テスト29<br>
        テスト30<br>

</div>
<p>
垂直方向にスクロールした割合：<span id="scrollTopOutput">0%</span>
</p>
<FORM NAME="pagedata" METHOD="POST" ACTION="test.html">
<button>ページ移動</button>
</FORM>

これでbox内の垂直方向にスクロールした割合を取得しています。

これに<form>タグのボタンからページを移動した際、取得した位置を渡し、次回からも同じスクロール位置で始めたいと思います。

（このページですが、本来はsidebar.phpという名前で他のファイルの中にinclude(sidebar.php)のようにして左半分のメニューとして使用しています。
そのためこのページ内では<body>タグがありません。）

すいませんがご教授のほどよろしくお願い致します。

同じタグがついた質問を見る

関連した質問