スムーススクロールを簡単に実装する方法!

,

31 views

ページ内のリンクをクリックした際、
普通だと一瞬でリンク先に移動します。
それでも支障はないのですが、ユーザーがどこに飛ばされたのか
迷ってしまい把握出来ません。
把握するためにはスクロールバーをいちいち見なきゃいけないため
ユーザーにはストレスです。

そのためスムーススクロールを実装した方がいいでしょう。

スムーススクロールとはページ内のリンクをクリックしたら、
スクロールで該当場所まで移動する演出のことです。

こちらを押してみてください。
一番上まで戻ります。
上まで戻るよ!

上記のように移動することをスムーススクロールと言います。
スムーススクロールを実装する方法は3つあります。

それぞれ紹介していきましょう!

jQueryで実装

下記のコードを記述すれば実装出来ます。
まずはじめにjQueryを読み込みましょう。
下記を<head>〜</head>に記述します。

次にスクリプトを読み込ませます。

<head>〜</head>に記述する方法

外部に記述して読み込む方法

自分はいつもjsは外部ファイルに記述して、
そのファイルを読み込んできています。

次にHTMLの記述です。

上記を記述し、スクロール先の要素名にid=”名前”と記述します。

CSSで実装

CSSに記述する方法はとても簡単でaタグにscroll-behavior: smooth;
記述するだけです。
下に移動するよ!

ブラウザ毎の対応状況

しかし、残念ながらIEなどではサポートされていませんので、
CSSではなく前述したjQueryで実装した方が良さそうです。
ブラウザ毎の対応状況です。

まとめ

スムーススクロールの実装方法は二つあるのですが、
CSSはブラウザによってサポートされていたりされていなかったりがあり、
使い勝手が悪いですね。。
jQueryの方が全ブラウザで実装できるので、jQueryを使った方が良いですね。