スムーススクロールにする | SkillhubAI（スキルハブエーアイ）

現時点でヘッダーナビゲーションや画面右下にある“トップに戻るボタン”をクリックすると、瞬時に目的にまでジャンプします。パッと画面が切り替わるので、別ページに移動した場合と同じような見え方ですよね。

このページ内を移動を、下のような動きに変更します。

file

こうした、クリックするとスクロールでその位置までスルスルと移動する方法を「スムーススクロール(smooth scroll)」と呼びます。素材サイトのindex.htmlに実装してみましょう。

jQueryを使ったスムーススクロール

jQueryを導入している場合、スムースクロールは下記の記述で実装できます。

確認用コード

/* -------------------------
  スムーススクロール
------------------------- */
$('a[href^="#"]').click(function(){
  var href= $(this).attr("href");
  if(href == "#" || href == ""){
    var target = $('html');
  }else{
    var target = $(href);
  }
  var position = target.offset().top;
  $('body,html').animate({scrollTop:position}, 500);
  return false;
});

コードの意味

上のスムーススクロールコードは、テンプレートのようなものです。様々なサイトで紹介も使用もされていますので、コピペで使ってしまう部類ですね。

何も見ずに自力でイチから書く必要はありません。ただ、勉強にはなりますので、どのような構成で・何の処理をしているかは分かると良いです。

下図で行ごとの意味を紹介します。

（※クリックで拡大します） file

画面上で行ってほしいのは、青い点線「B」ブロック部分です。

var position = target.offset().top;
$('body,html').animate({scrollTop:position}, 500);

下の行では「どれだけの距離を移動（スクロール）するか」を決めています。その距離を取得しているのが、上の行ですね。距離取得のために、targetという変数を使っています。

オレンジの点線「A」ブロックは、変数targetを決めるための準備をしているような形です。

if(href == "#" || href == ""){
    var target = $('html');
}else{
    var target = $(href);
}

上の条件式でtrue=変数targetの中身が「$('html')」の場合「.offset().top」で位置が計れないため、変数positionに格納される値は0。

条件式の結果がfalse=変数targetの中身が「$(href)」の場合ドキュメント最上部からの距離が取得され、その値が変数positionに格納されます。

三項演算子を使った書き方

googleなどで「スムーススクロールコード」などと検索すると、上で紹介したコードではなく下記コードが掲載されていることが多いです。

$('a[href^="#"]').click(function(){
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $('body,html').animate({scrollTop:position}, 500);
    return false;
});

別のコードのように感じる方もいらっしゃるかもしれませんが、命令している内容は一緒。 if文ではなく「三項演算子」と呼ばれる条件分岐を使って書いています。

?の前が条件、後ろがtrue時とfalse時の処理になっています。

file

CSSでスムーススクロールについて

実はjavascript/jQueryを使用せず、CSSのみでスムーススクロールを実装することが出来ます。必要な記述はたったこれだけ。

css

html{
  scroll-behavior: smooth;
}

めちゃくちゃ簡単ですね。ただし、この「scroll-behavior」プロパティは、対応していないブラウザがあるため、場合によっては効かないケースもあります。

参考：scroll-behavior | MDN

実習

ここまでのレッスンで行ってきたことを、素材サイトのblog-single.htmlにも反映させてみましょう。
下記の３つを実装してみて下さい。

スクロールに応じてヘッダーナビゲーションの色が変わる
ページトップボタンの設置（indexと同じくフェードインでOK）
スムーススクロールの実装

本レッスンで作成したindex.html、実習の回答となるblog-single.html などはレッスン素材にアップロードしています。確認用にご利用下さい。

レッスン一覧へ