Madogiwa Blog

主に技術系の学習メモに使っていきます。

`Window.scrollBy()`で`scroll-behavior`を指定する方法メモ📝

スクロールしてTOPに戻るボタンを実装する際にスムーズにスクロールさせるためにcssscroll-behaviorを指定することがよくあると思いますが、

developer.mozilla.org

Window.scrollBy()の実行時にも指定できることを知らなかったのでメモ📝

developer.mozilla.org

元々は以下のような実装をしていたんですが、

const scroll = (to: number) => window.scrollBy(0, to);

objectを使って指定する方式で修正するとscroll-behaviorを指定してスクロールさせることができました🙌

const scroll = (to: number) => window.scrollBy({ top: to, behavior: "smooth" });

実行時に指定できるの便利ですね✨

ちなみにwindowのスクロール系のメソッドは基本的にobjectを使って指定する方式でscroll-behaviorを指定できるようです(便利)

developer.mozilla.org

developer.mozilla.org