コンテンツが多く長いページの下までスクロール後、ページトップへ移動する場合、idを使ったページ内遷移ができますが、移動が一瞬なので同じページ内なのか別のページなのか分からなくなることがあります。これはスクロールにスムーズな動きを付けることで改善できます。

なお、"Vanilla JS"とは素のJavaScriptを指します（以下、単にJavaScriptと呼称）。

● (1) jQueryのanimate()メソッドを使用したスクロール

'#pagetop1'というターゲット（このサンプルではボタン型）をクリックすると、offset値（ブラウザ画面の左上からの座標）のy座標が"0"のページトップへanimate()メソッドのイージング"swing"の動作で移動します。下側のの青いボタンをクリックすると、動作確認のためにページのボトムへ移動します。

(1)のscript

$('#pagetop1').on('click', function () {
    $('body,html').animate({scrollTop: 0 }, "swing");
    return false;
});

 

● (2) JavaScriptのwindow.scrollToメソッドを使用したスクロール

addEventListener メソッドを使用して "click"イベントのデフォルトの動作を防止し、window.scrollTo メソッドを使用して、scroll-behavior="smooth"のスムーズな動作で、ページトップへスクロール移動します。

(2)のscript

document.addEventListener("DOMContentLoaded", function() {
  const pageTop = document.getElementById("pagetop2");
  pageTop.addEventListener("click", function(event) {
    event.preventDefault();
    window.scrollTo({top: 0,behavior: "smooth"
    });
  });
});

 

● (3) ページのボトムへ移動する青いボタンもjQueryのanimate()メソッドを使用

(3)のscript

$('#pagebottom').on('click', function () {
    const pageBottom = $('#xbottom').offset().top;
    $('html,body').animate({scrollTop: pageBottom}, "swing");
});

 

以下のダミーboxは、スクロールの動作確認のため、縦方向の長さをかせぐものです。赤いスクロール発動ボタンまで続きます。

↓↓↓↓↓

↓↓↓↓↓

↓↓↓↓↓

↓↓↓↓↓

↓↓↓↓↓

↓↓↓↓↓

↓↓↓↓↓