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

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

ウィンドウ

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

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

関連記事

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

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

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

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

ドキュメントの端からの位置を参照/設定したい

★.pageXOffset 横方向のオフセットを参照/設定 ★.pageYOffset 縦方向のオフセットを参照/設定 スポンサーリンク ★・・・Windowオブジェクト(ウィンドウ名)【省略可】 & …

JavaScriptのstatusでステータスバーに文字を表示しよう!

★.status ステータスバーの文字列を参照/設定 ★.defaultStatus ステータスバーのデフォルトの文字列を参照/設定 ★・・・Windowオブジェクト(ウィンドウ名)【省略可】 スポン …

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

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