DAY47.実務でよく使うアニメーションの付け方編 スムーススクロールとフローティングアイテム

01.スムーススクロール

内部リンクをクリックした時に「ぐいーん」と移動した方が
ページ内を移動していることが理解できて少し親切

スムーススクロールが鉄板で使われるパーツといえば、
「トップへ戻るボタン」

1.ページ内リンクのクリックを検知する

スムーススクロールは
ページ内リンクをアニメーションをつけて移動させること

ページ内リンクの発動キーはhrefが「#」から始まるリンクとなる

// #から始まるURLがクリックされた時 jQuery('a[href^="#"]').click(function() {
// スムーススクロールの処理を書く
});

2.ページ内リンク先のidと位置を取得してアニメーション

要素の位置が取得できたら、その位置まで
jQueryのアニメーションを使って移動させることができる

// #から始まるURLがクリックされた時 jQuery('a[href^="#"]').click(function() {
　// 移動速度を指定（ミリ秒）
　let speed = 300;
// hrefで指定されたidを取得
　let id = jQuery(this).attr("href");
// idの値が#のみの場合ターゲットをhtmlタグにしてトップへ戻るようにする
　let target = jQuery("#" == id ? "html" : id);
// ページのトップを基準にターゲットの位置を取得
　let position = jQuery(target).offset().top
// ターゲットの位置までspeedの速度で移動
jQuery("html, body").animate(
　{
　　scrollTop: position
　},
　　speed
　);
　return false;
});

3.固定ヘッダー分の高さを考慮する

ヘッダーが固定されている場合はページ内リンク先の
コンテンツにかぶってしまう

ヘッダーの高さを考慮してスムーススクロールでの移動先を決める

ヘッダーの高さをJavaScritpで取得して、ヘッダーの高さ分を
移動するはずだったエリアの位置から引いてあげればOK

// #から始まるURLがクリックされた時 jQuery('a[href^="#"]').click(function() {
// .headerクラスがついた要素の高さを取得
　let header = jQuery(".header").innerHeight();
　let speed = 300;
　let id = jQuery(this).attr("href");
　let target = jQuery("#" == id ? "html" : id);
// トップからの距離からヘッダー分の高さを引く
　let position = jQuery(target).offset().top - header;
// その分だけ移動すればヘッダーと被りません
　jQuery("html, body").animate(
　{
　　scrollTop: position
　},
　　speed
　);
　return false;
});

02.フローティングアイテム

〇〇px以上スクロールされたらクラスを付与するという処理を

デフォルトの状態では非表示にしておいて、
クラスが付いたら表示されるようCSSを用意

// スクロール検知
jQuery(window).on("scroll", function() {
// トップから100px以上スクロールしたら
　if (100 < jQuery(this).scrollTop()) {
// is-showクラスをつける
　jQuery('.to-top').addClass( 'is-show' );
} else {
// 100pxを下回ったらis-showクラスを削除
　jQuery('.to-top').removeClass( 'is-show' );
　}
});