yoshiislandblog.net
元営業の駆け出しアラサーSEが、休日にMACと戯れた際の殴り書きメモ。日々勉強。日々進歩。
HTML5_Badge_512

こういうので良いんだよ、JavaScript無しで世界一簡単な上に戻るボタン

2022-07-27

スマホサイトでよく見る上に戻るボタンを作ろうと調べると、JavaScriptでゴリゴリ作成しているものが多かったので、
html/cssだけで上に戻るボタンを実装できる方法を紹介
多分これが一番簡単な方法

20220727_scroll_to_top_1

最低限コード

htmlの方で最低限書くのはこれだけ
aタグのリンクを#で指定するとトップに飛ぶようになる

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./style.css">
    </head>

        <a href="#" id="scroll-to-top-link"> <!-- 指定なしで上部で飛ぶ -->
            <div id="scroll-to-top">
                ↑
            </div>
        </a>
</html>

cssで最低限書くのはこれだけ
「scroll-behavior: smooth」で↑をクリックすると最上部に飛ぶのではなく、スクロールするようになる
あとは、「position: fixed」で↑が一緒にスクロールされないように、場所を指定している

html{
    scroll-behavior: smooth; /* scroll-to-top用の設定 */
}

#scroll-to-top {
    position: fixed;
    right: 10px;
    bottom: 10px;
}

動作確認用コード

以上で問題なく動作するようになるが、
スクロールするだけのコンテンツが無いので、一旦Javascriptで適当に作成して、
↑ボタンを目立つようにデコレーションしたのが以下

% cat index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./style.css">
    </head>

    <body>
        <a href="#" id="scroll-to-top-link"> <!-- 指定なしで上部で飛ぶ -->
            <div id="scroll-to-top">
                ↑
            </div>
        </a>

        <div id="large-content"></div> <!-- scrollテスト用コンテンツ -->
    </body>

    <!-- scrollテスト用コンテンツを作成-->
    <script>
        const targetElement = document.getElementById("large-content");
        for (let step = 0; step < 100; step++){
            const newElement = document.createElement("p");
            newElement.textContent = "hoge" + step;
            targetElement.appendChild(newElement);
        }
    </script>

</html>
% cat style.css
@charset "UTF-8";

html{
    scroll-behavior: smooth; /* scroll-to-top用の設定 */
}

#scroll-to-top {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 100;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: blue;
    font-size: 30px;
    text-align: center;
}

#scroll-to-top-link {
    text-decoration: none;
    color: white
}

動作確認

動作確認するとこんな感じになる

以上。