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

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

ウィンドウ

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

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

関連記事

新しいウィンドウを開きたい

★ = ▼.open(♦, ▲, ●) ★・・・新しいウィンドウのオブジェクト ▼・・・親Windowオブジェクト(ウィンドウ名)【省略可】 ♦・・・URI ▲・・・新しい …

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

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

ウィンドウのサイズを調べたい

★.innerWidth ウィンドウの内側の幅を参照/設定 ★.innerHeight ウィンドウの内側の高さを参照/設定 ★.outerWidth ウィンドウの外側の幅を参照/設定 ★.outerH …

ウィンドウの位置を指定したい

★.moveTo(♦, ♢) ウィンドウ位置を設定 ★.moveBy(▲, △) ウィンドウ位置を相対的に変更 ★・・・Windowオブジェクト(ウィンドウ名)【省略可】 &#x2666 …

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

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