WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： ノムさん
カテゴリー： プログラム >JavaScript

ページ内リンクでスルスルっと滑らかにスクロールするページを見たことはありませんか？一瞬で移動するのではなくどこに移動したのか視覚的に分かりやすくすることで、ユーザーにとって見やすく利用しやすいページを作ることができます。今回はその方法についていくつかご紹介します。

準備

まず、以下のコードを記述します。

<a href="#〇〇">link01</a>
<div id="〇〇">link01</div>

a href=”#〇〇”をクリックするとdiv id=”〇〇”に移動するという記述（ページ内遷移）をしています。

方法1：scroll-behaviorプロパティを使う

cssに以下コードを記述するだけでスムーススクロールが完成します。

html {
  scroll-behavior: smooth; // スムーススクロール
}

ですが、注意点として以下が挙げられます。

• 移動速度の指定が出来ず、ブラウザ依存となる
• イージングが効かない
• ページ内リンクはすべてスムーススクロールになる（リンクごとに細かい指定が出来ない）
• 遷移先の位置を指定できない

細かい設定がまだ出来ないため、デフォルト設定でも問題ないという場合に使うとよいのではないでしょうか。

方法2：jQueryを使う

jQueryを読み込んだ後JavaScriptに以下コードを記述します。

$('a[href^="#"]').click(function () { // ページ内スクロール
 const speed = 600; // スクロールの速度（ミリ秒）
let href = $(this).attr("href");
// アンカーの値取得 リンク先（href）を取得して、hrefという変数に代入

let target = $(href == "#" || href == "" ? "html" : href);
// 移動先を取得 リンク先(href）のidがある要素を探して、targetに代入

let position = target.offset().top;
// 移動先を調整 idの要素の位置をoffset()で取得して、positionに代入

$("body,html").animate({ scrollTop: position }, speed, "swing");
return false;
// スムーススクロール linear（等速） or swing（変速）

});

スクロールの移動速度、スクロールの種類は変更可能です。

方法3：smooth-scroll.js（プラグイン）を使う

まず、CDNでsmooth-scroll.jsを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.3/smooth-scroll.min.js"></script>

次にJavaScriptに以下コードを記述すれば完成です。

// ページ内リンクのみ取得
var scroll = new SmoothScroll('a[href*="#"]', {
   speed: 600,//スクロールする速さ
  });

まとめ

状況に合わせてCSSのみでとても簡単にスムーススクロールを実装出来ますし、設定にこだわりたい場合はjQueryやプラグインを使って細かくカスタマイズしてみてはいかがでしょうか。