こんにちは。
ゆうや（@yuyaphotograph）です！
この記事では、
- ページ内リンクのスムーススクロールを実装したい
- コピペでスムーススクロールを実装したい
- ページ内リンクのスムーススクロールの実際のデモが見たい
という方のお悩みを解決します！
スムーススクロールとは？
スムーススクロールとは、リンクをクリックするとページ内リンクが設定されている要素にスルスルっと移動するスクロールのことを指します。
Web制作でよく使用されている箇所は例えば、以下がありますね。
- トップへ戻るボタン
- LPのヘッダー項目
普通のページ内リンクと比べた時のスムーススクロールの良い点はこちら。
- 動きが滑らかでオシャレ
- 普通のページ内リンクは一瞬でその要素まで飛ぶので移動したのか分かりづらいのに対し、スムーススクロールは移動していることが分かりやすい
以下で実際のコードを紹介します！
【コピペ】スムーススクロールのコード
jQueryの以下のコードをコピペでスムーススクロール実装完了です！
default.js
//ページ内リンクスムーススクロール
$('a[href^="#"]').on('click', function () {
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop: position}, 550, "swing");
return false;
});＊スクロールのスピードは「550」となっているところをよしなに変更して調整していただくようお願いします。
スムーススクロールのサンプルデモ
ページ内リンクのスムーススクロールのデモを作りました。
「項目1」「項目2」のリンク要素をクリックしてスルスル感をぜひ味わってみてください〜
See the Pen
oNXRbyz by 石森裕也 (@yuyaphotograph)
on CodePen.
スムーススクロールが実際に使われているWebサイト
今回紹介したページ内リンクのスムーススクロールが実際に使われているWebサイトを１つご紹介！
演劇漫画『アクタージュ』に出てくる架空の映像制作会社「スタジオ大黒天」の公式サイトです。
ページ右上のハンバーガメニューを選択するとメニュー一覧が表示されます。
その中のどれかをクリックしてみてください。
ページ内リンクのスムーススクロールになっておりますゆえ。
まとめ
今回紹介したコードをコピペしてぱぱっとスムーススクロール実装しちゃいましょう〜！
あ、前提としてjQueryをサイトで読み込んでいないと動きませんのでご注意を〜
「スクロール関連の知識をさらにつけたい！」
という方は以下の記事にも目を通してみてください〜
【jQueryなし！】CSSだけでスムーススクロールを実装できるscroll-behaviorとは？ 
【jQuery】フッター手前で止まるボタンの実装方法 
一定量スクロールしたら表示されるボタンを作る方法【jQuery、CSS】