スムーススクロールを学ぼう

スムーススクロールとは、ページ内リンクなどで発生するスクロールを滑らかに動くようにしたものです。

右下のTOPに戻るボタンを押した時の動き。

今回はJavaScriptで実装する方法を紹介しています。

実はCSSプロパティでscroll-behaviorというプロパティがあり値をsmoothにすればたった1行で実現できるのですが、safariが未対応なため残念ながら実案件で使うのはまだ難しい状況だからです。もうしばらくはJSでの実装を使用しましょう。

そんなスムーススクロールを学べる記事をまとめました。

セカヤサブログ

URL:https://itokoba.com/archives/1966

基本的な作り方です。ヘッダーの高さ分の調整方法など細かい部分も書かれており、長く使えるコードを学べます。

難易度:★★☆

hiraku blog

URL:https://hirakublog.com/smooth-scroll-js/

こちらはライブラリを使ったパターンです。サクッと実装したい方はこの記事を読んでおけば十分でしょう。

難易度:★☆☆

Leave a Reply

Your email address will not be published.