現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

ウィンドウ

JavaScriptのscrollを使ってページをスクロールさせてみよう!

投稿日:

★.scroll(♦, ♢) 指定位置にスクロールする

★・・・Windowオブジェクト(ウィンドウ名)【省略可】
♦・・・X座標
♢・・・Y座標
スポンサーリンク

    ページの内容をスクロールさせるメソッドです。座標や変更量はピクセル単位で指定します。

scrollメソッド

    (♦, ♢)で指定した座標位置にスクロールし、ページの内容を表示します。

    下記に例を用意してみました。1から100までの数字を縦1列に並べて表示させたページで、ボタンを押した際にscrollの動作確認ができます。

スポンサーリンク
<html>
    <head>
        <title>JavaScript Sample</title>
        <script type=”text/javascript”>
            function clickScroll() {
                // 座標(0, 500)にスクロールさせます。
                window.scroll(0, 500);
            }
        </script>
    </head>
    <body>
        <input type=”button” value=”scroll” onclick=”clickScroll();”>
        <table>
            <script type=”text/javascript”>
                for (let i = 1; i <= 100; i++) {
                    document.write(‘<tr>’);
                    document.write(‘<td>’, i, ‘</td>’);
                    document.write(‘</tr>’);
                }
            </script>
        </table>
    </body>
</html>
スポンサーリンク

-ウィンドウ
-

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

ブラウザのボタンと同様の処理をしたい

★.back() 1つ前のページに戻る ★.forward() 1つ先のページに進む ★.home() ホームページに移動 ★.print() 印刷する ★.stop() 読み込みを中止 ★.find …

ウィンドウのサイズを変更したい

★.resizeTo(♦, ♢) ウィンドウサイズを変更 ★.resizeBy(▲, △) ウィンドウサイズを相対的に変更 ★・・・Windowオブジェクト(ウィンドウ名)【省略可】 & …

別のウィンドウを操作したい

★.opener オープン元のウィンドウを参照 ★.closed ウィンドウが閉じているかを参照 ★.name ウィンドウ名を参照/設定 ★・・・親Windowオブジェクト(ウィンドウ名) 親ウィンド …

JavaScriptのscrollToを使ってページをスクロールさせてみよう!

★.scrollTo(♦, ♢) 指定位置にスクロールする ★・・・Windowオブジェクト(ウィンドウ名)【省略可】 ♦・・・X座標 ♢・・・Y座標 スポンサーリンク

ウィンドウを閉じたい

★.close() ★・・・Windowオブジェクト(ウィンドウ名)【省略可】 スポンサーリンク ウィンドウを閉じるには、closeメソッドを使用します。★に指定したウィンドウを閉じ、ウィンドウ名を省 …