【JS】画面の高さ分スクロールする

どうも。

JavaScript で画面の高さを取得してその分だけスクロールする方法をメモしておきます。

HTML

以下のように高さ 100 px のボタンを「あああ」、「いいい」・・・「ととと」まで縦に 20 個並べます。

f:id:yyama1556:20191124131016p:plain

左のボタンが上にスクロール。右のボタンが下にスクロールします。

ご覧の通りブラウザ上には縦に 5 個分だけ表示されていて、右端にはスクロールバーが見えます。

HTML は以下のようになりました。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="main.js"></script>
        <style>
            button {
                height: 100px;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <div>
            <button onclick="scrollUp();">UP あああ</button>
            <button onclick="scrollDown();">Down あああ</button>
        </div>
        <div>
            <button onclick="scrollUp();">UP いいい</button>
            <button onclick="scrollDown();">Down いいい</button>
        </div>
        <div>
            <button onclick="scrollUp();">UP ううう</button>
            <button onclick="scrollDown();">Down ううう</button>
        </div>
        <div>
            <button onclick="scrollUp();">UP えええ</button>
            <button onclick="scrollDown();">Down えええ</button>
        </div>
        <div>
            <button onclick="scrollUp();">UP おおお</button>
            <button onclick="scrollDown();">Down おおお</button>
        </div>
        <div>
            <button onclick="scrollUp();">UP かかか</button>
            <button onclick="scrollDown();">Down かかか</button>
        </div>
        <div>
            <button onclick="scrollUp();">UP ききき</button>
            <button onclick="scrollDown();">Down ききき</button>
        </div>
        <div>
            <button onclick="scrollUp();">UP くくく</button>
            <button onclick="scrollDown();">Down くくく</button>
        </div>
        <div>
            <button onclick="scrollUp();">UP けけけ</button>
            <button onclick="scrollDown();">Down けけけ</button>
        </div>
        <div>
            <button onclick="scrollUp();">UP こここ</button>
            <button onclick="scrollDown();">Down こここ</button>
        </div>
        <div>
            <button onclick="scrollUp();">UP さささ</button>
            <button onclick="scrollDown();">Down さささ</button>
        </div>
        <div>
            <button onclick="scrollUp();">UP ししし</button>
            <button onclick="scrollDown();">Down ししし</button>
        </div>
        <div>
            <button onclick="scrollUp();">UP すすす</button>
            <button onclick="scrollDown();">Down すすす</button>
        </div>
        <div>
            <button onclick="scrollUp();">UP せせせ</button>
            <button onclick="scrollDown();">Down せせせ</button>
        </div>
        <div>
            <button onclick="scrollUp();">UP そそそ</button>
            <button onclick="scrollDown();">Down そそそ</button>
        </div>
        <div>
            <button onclick="scrollUp();">UP たたた</button>
            <button onclick="scrollDown();">Down たたた</button>
        </div>
        <div>
            <button onclick="scrollUp();">UP ちちち</button>
            <button onclick="scrollDown();">Down ちちち</button>
        </div>
        <div>
            <button onclick="scrollUp();">UP つつつ</button>
            <button onclick="scrollDown();">Down つつつ</button>
        </div>
        <div>
            <button onclick="scrollUp();">UP ててて</button>
            <button onclick="scrollDown();">Down ててて</button>
        </div>
        <div>
            <button onclick="scrollUp();">UP ととと</button>
            <button onclick="scrollDown();">Down ととと</button>
        </div>
    </body>
</html>

script タグで main.js を読み込んでいます。

JavaScript

main.js の内容です。

function scrollUp() {
    window.scrollBy(0 , -document.documentElement.clientHeight);
}
function scrollDown() {
    window.scrollBy(0 , document.documentElement.clientHeight);
}

document.documentElement.clientHeight を使用して画面の高さ（ツールバーやスクロールバー含まず）を取得し、window.scrollBy でスクロールを実行しています。

取得できる画面の幅や高さはいろいろあります。参考にさせていただいた記事です。
ウインドウサイズを取得する【JavaScript 動的サンプル】