【JavaScript】ページトップへスクロールするボタンの作り方

2019年2月2日
HTML
JavaScript

ブログに「ページトップへスクロールするボタン」を設置したかったので作成した。

サンプル

前提

下記の関数やオブジェクトを定義済みの想定とする。

手順

スクロールのイベントを登録するオブジェクトを定義する

ボタンにスクロールのイベントを登録するため、下記のオブジェクトを定義する。

function PageTopButtonEventRegisterer() {
    const _SCROLLER = new Scroller( document.documentElement, 70, 15 );
  
    function _register() {
        const PAGE_TOP_BUTTON = document.getElementById( 'page-top-button' );
        if ( PAGE_TOP_BUTTON === null ) return;

        const onPushed = function() {
            _SCROLLER.scrollByPosition( 0 );
        };

        PAGE_TOP_BUTTON.registerOnPushed( onPushed );
    }

    return {
        register: _register,
    };
}

ボタンを設置したい箇所にdiv要素を記述する

ページ内のボタンを設置したい箇所に下記の要素を記述する。

<div id="page-top-button">ページトップへ</div>

DOMContentLoadedイベントでオブジェクトを生成し、関数を呼ぶ

PageTopButtonEventRegistererオブジェクトを生成し、register関数を呼ぶ処理をdocumentオブジェクトのDOMContentLoadedイベントに登録する。

document.addEventListener( 'DOMContentLoaded', function() {
    const EVENT_REGISTERER = new PageTopButtonEventRegisterer;
    EVENT_REGISTERER.register();
} );

これで先ほど配置したdiv要素を押すとページトップへスクロールする。

CSSで見た目を整える

後はHTMLの各要素に付いているIDを用いて、CSSで見た目を整える。