[JavaScript] アニメーションなしページトップスクロールさせる方法

1 min read
hiroweb developer

今はページトップへの移動は、jQuery を使ったアニメーションスクロールが主流な感じです。 逆に JavaScript でただトップに移動させる方法を忘れてしまっていたのでメモです。

jQuery を使ったスムーズスクロール

$('body, html')に関して深くは言及しないとして、こんな感じのコードを使われてることが多いかと思います。

$("body, html").animate({ scrollTop: 0 }, 1500, "linear");

JavaScript のページトップ移動

アニメーションを省いてscrollTopに 0 を指定しているだけで、結果的にやってることは同じです。

document.body.scrollTop = document.documentElement.scrollTop = 0;

注意

bodyscroll-behavior: smooth;を指定しているとスムーズスクロール(惰性)になってしまうのでそれを意図しない場合は注意。

body {
  scroll-behavior: smooth;
}