【徹底解説】5歳でも分かる、スムーススクロールの作り方(jQuery編)

ABOUTこの記事をかいた人

フロントエンドエンジニア。

こんにちは。今回はスムーススクロールの作り方を徹底的に解説していきます。

この記事は僕が書いている5歳でも分かるシリーズの1つです。こちらにスライドショーやタブメニューなどの作り方も載っていますのでぜひご覧ください。

5歳でも分かる、JavaScriptをどこまで学べば良いかの学習ロードマップ

2021年10月20日

作るものの確認

今回作るのは、ページ内リンクなど通常のスクロール以外でスクロールが発生する際の動きを滑らかにするものです。

index.html
style.css

実装

準備

コードを書き始める前に、ディレクトリ構成の確認とリセットCSSの導入です。

├── index.html
├── resources
   └── styles
      ├── destyle.css
       └── style.css

上記の形でファイルを配置しましょう。stylesはルートディレクトリ直下でも良いですが、実際にはresourcesの中にimagesフォルダなどと一緒に入っている形が多いのでそのようにしました。

destyle.cssというのがリセットCSSで、詳細な説明は省きますが各種タグに初期で当たっている様々な余計なスタイルを打ち消してくれるものです。

今回はこちら(https://github.com/nicolas-cusan/destyle.css/blob/master/destyle.css)のものを利用します。こちらのコードをそのままコピーしてdestyle.cssとして上記の場所に配置します。

destyle.css

見た目を作る

まずは見た目を作りましょう。そんなに複雑ではないので一気に作ってしまいます。ヘッダーは固定にしておきます。

動きをつける

それでは動きを付けていきます。まずはjQueryを読み込みます。

続いてコード部分です。まずは、aタグのクリックした時の挙動を一旦止める必要があります。

event.preventDefault()を実行することでデフォルトの動きを止めることができます。

続いてスクロールの処理です。

クリックした要素をthisを使って取得し、そのaタグのhrefの値を取得します。それに対応したセクションの位置をoffset()メソッドを用いて取得したら、その位置までscrollToメソッドで移動します。behavior: “smooth”を指定することにより滑らかにスクロールします。

さて、この状態でメニューをクリックしてみましょう。おっと、文字がヘッダーに隠れてしまいましたね。

ヘッダーの高さ分を考慮していなかったのでこのようになってしまいます。最後に調整をしましょう。

これで完成です!

まとめ

ということで、スムーススクロールの解説でした。

他にもいろんなパーツの解説をしていますので、ぜひご覧ください。

5歳でも分かる、JavaScriptをどこまで学べば良いかの学習ロードマップ

2021年10月20日

【徹底解説】5歳でも分かる、スクロールアニメーションの作り方(jQuery編)

2021年10月20日

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください