お世話になります。
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>タグがありません。)
すいませんがご教授のほどよろしくお願い致します。
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/10 08:31