JavaScript ブラウザの表示領域を指定した位置までスクロールする
「scrollTo()」メソッドは、ピクセル単位で指定した位置へ、ウィンドウの表示領域を移動します。また、スムーズにスクロールさせる場合は、タイマーを使って処理するかスムーズスクロールするライブラリやプラグインを使用する必要があります。サンプルでは、「スクロールGo」ボタンをクリックすると、ウィンドウ内のコンテンツ表示領域が、ウィンドウの表示領域左上角から左へ10ピクセル、上へ100ピクセル移動します。scrollBy()と違い、一度表示領域が移動すると、それ以降ボタンをクリックしても表示位置は変わりません。
- メソッド:window.scrollTo(x,y)
- x:横方向の位置(ピクセル)
- y:縦方向の位置(ピクセル)
<body>
<script>
function SRto () {
window.scrollTo(10,100);
}
</script>
<div id="STY1" style="position: absolute; left:200px;top:200px; width:1000px;height: 1000px; background: tan;">
<input type="button" value="スクロールGo" onclick="SRto()">
ブラウザを指定した位置までスクロールする<br>
(ウィンドウの左上の角を基準にピクセルで指定)
</div>
</body>
スマートフォンでアドレスバーを隠す
iPhoneやAndroidなどのスマートフォンでは、ページの読込を完了した後、数ミリ秒後にスクロールさせることでアドレスバーを隠すことができます。なお、ページがスクロール可能でない場合は、アドレスバーを隠すことはできません。
window.addEventListener("load", function(){
setTimeout("scrollTo(0,1)", 100);
}, false);