のせっち 
こんにちは！のせっち@nosecchi01です。
aタグを押した時にヌルッとスクロールするアニメーションの実装方法です。
固定ヘッダーを考慮した解説記事となっています。
初心者の方向けに、
- コピペで簡単に実装できる
- 詳しい解説付き
となっています。
それではいってみましょう！
jQueryを使わず、javascriptのみで書いたものもあります！こちらも合わせてどうぞ！
動きを確認できるサンプル
さっそくcodepenで見てみましょう！
See the Pen Smooth Scroll(jQuery) by Yuki Nose (@yukinouz1) on CodePen.
- Menu1, Muenu2, Menu3を押すと、指定位置までヌルッとスクロール
- 固定ヘッダー分の高さが考慮されて、ぴったりの位置で止まる
jQuery部分の解説
HTML, CSSは基本的な事しか書いていないので、jQuery部分を解説していきます。
まずは全体像を見てみましょう！
const header = $('#header');
$('a[href^="#"]').on('click', function() {
const gap = header.outerHeight();
const speed = 500;
const href = $(this).attr("href");
const target = $(href == "#" || href == "" ? "html" : href);
const position = target.offset().top - gap;
$("html, body").animate({ scrollTop: position }, speed, "swing");
return false;
});こちらを解説していきます。
細かく解説
さて、ここからめちゃくちゃ細かく解説していきます。
初心者向けですので、適宜飛ばし読みしていただいてOKです。
先に変数を見ていきます。
const header = $('#header'); // #headerを取得
const gap = header.outerHeight(); // #headerの高さを取得
const speed = 500 // スクロールスピードまずは簡単なものからです。
今回は固定ヘッダーを考慮するのでheaderの高さを取得しておきます。
スクロールスピードを変数speedに格納しています。
$('a[href^="#"]').on('click', function() {
// 解説部分のみ
const href = $(this).attr("href");
});
$('a[href^="#"]')で、aタグでhref="#..."となっているものを取得しています。
$(this).attr("href");でaタグの中身を取得します。
試しにconsole.logしてみればわかりますね。
$('a[href^="#"]').on('click', function() {
// 解説部分のみ
const href = $(this).attr("href");
console.log(href) // 解説用に追加
// <a href="#menu1">をクリックした場合
// 結果: #menu1
});
const target = $(href == "#" || href == "" ? "html" : href);||はorなのでhref="#"の場合、または…（後半部分）となります。
href == "" ? "html" : hrefは三項演算子で、if文を簡潔に書いたものです。?の後にはtrueの場合、:の後にfalseの場合が入ります。
hrefの中身が空白ならば、”html”、偽ならば、href（先ほど定義した）が入る、ということになりますね。
よくわからん…という場合は、とりあえずそんなもんなんだ、でOKです。
const position = target.offset().top - gap;offset()でドキュメントの左上を起点に指定位置までの距離を取得します。offset().topでY位置を取得します。
- gapは最初に定義した#headerの高さです。固定ヘッダーの場合は、これをやっておかないと、スクロールした際に、header分が被ってしまいます。
$("html, body").animate({ scrollTop: position }, speed, "swing");animateメソッドを使って、scrollTop: positionへ。posititonは先ほど定義しました。
speedの部分は、先ほどconst speed = 500を定義したのでここでは500ミリ秒です。
"swing"はアニメーションの挙動です。"linear"なども指定できますが、swingが無難だと思います。
解説は以上です！
jQueryのオススメ書籍
僕が実際に読んだものでよかったのは下記2点です。
jQuery標準デザイン講座
基本文法はもちろんですが、定番のパーツを用いて解説してくれる点が神です。
結局jQueryでやりたいことは、Webサイトでの動きの実装ですよね。その点にフォーカスしてくれているのでとても使い勝手が良いです。
コーディングが５倍速くなる！jQueryセレクター超入門 Kindle版
jQueryのセレクタのみに特化した漢気あふれる本です。
セレクタを知らないと、「あれ？なんで動かない？」とか、「どうやってこのセレクタを狙えばいいの？」といった疑問出てきてしまいます。
この本でセレクタの事は全てわかるので辞書的に置いておきたい一冊です。
kindle Unlimitedで読めるところも推しポイントですね！
kindle Unlimitedは月額980円で対象の電子書籍が読み放題になるサービスです。
技術系教材は基本的に高いので、1〜2ヶ月に1冊程度読むくらいでも十分ペイできますよ。
Javascriptのみで実装する方法
冒頭でも紹介しましたが、
jQueryを使わずにJavascriptのみで実装する方法も解説しています！