新しいページトップボタンの処理の書き方。【CSS】scroll-behaviorと【JS】scrollIntoViewを使ったスムーズスクロール

2022年10月7日2022年12月1日

WEBサイトの定番部品の「ページトップへ戻るボタン」。だいたいのWEBサイト、ランディングページ（LP）で必要なので使い回している人も少なくないはずです。jQueryのanimateを利用している人、そのコードもう古いかもしれません。IE11がサポート外になった今、もっと簡単な新しいコードで書いていきましょう。

ページ内リンクへのアンカースクロールはCSSで制御できる
- scroll-behaviorとは
ページトップへボタンの処理にはscrollIntoView関数を使うのがおすすめ
最後に

ページ内リンクへのアンカースクロールはCSSで制御できる

ページ内リンクへのスムーススクロールは今までjavascriptで制御してきました。
今までのコードは次のようなものでした。※jQueryあり

▼今までのスムーズスクロールの設定方法

$(function() {
  $('a[href=^"#"]').on('click', function() {
    var time = 600;
    var href = $(this).attr('href');
    var $target = $(href == '#' || href == '' ? 'html' : href);
    var pos = $target.offset().top;
    $('html,body').animate( { scrollTop: pos }, time, easing );
    return false;
  });
});

このようなコードで実現できましたが新しいCSSプロパティ「scroll-behavior」をhtmlに設定してその値を「smooth」にするだけで上記のjavascriptと同様の動きを実現できるようになりました。

▼あたらしいスムーズスクロールの設定方法

html {
  scroll-behavior: smooth;
}

scroll-behaviorとは

CSSのプロパティ。スクロールが発生した際のスクロールのふるまいを設定できる。

▼scroll-behaviorの値一覧

scroll-behavior: auto;
scroll-behavior: smooth; // スムーズにスクロールする
scroll-behavior: inherit; // 親プロパティを継承する
scroll-behavior: initial; // 継承を初期化する
scroll-behavior: revert; // ブラウザのデフォルトスタイルにする
scroll-behavior: unset; // プロパティをリセットする

固定ヘッダー（Sticky）がある場合のずれ修正方法

html {
  scroll-behavior: smooth;
  /* 追加 固定ヘッダーの高さを指定する */
  scroll-padding-top: 80px;
}

↑このCSSを指定するだけでスクロール先のオフセットを設定できます。

ページトップへボタンの処理にはscrollIntoView関数を使うのがおすすめ

ページトップへボタンの処理も今まではjQueryで書くことが多かったと思います。

今までの書き方

<body>
<div id="page">
...
</div>
<button id="pagetop">ページトップへ</buton>
</body>

$(function() {
  $('#pagetop').on('click', function() {
    $('html, body').animate({srollTop, 0}, 600);
  });
});

新しい書き方

jQueryを使用しなくて比較的短く書くことができます。

<body>
<div id="page">
...
</div>
<button id="pagetop">ページトップへ</buton>
</body>

let trigger = document.getElementById('pagetop');
trigger.addEventListener('click', function() {
    document.getElementById('page').scrollIntoView();
});