, ,

[JavaScript General] CSS, jQuery, JavaScript による Smooth Scrolling の実装例と Easing に関するまとめ

公開日: 2019/01/30
更新日: 2019/02/05

いわゆる「ページのトップへ戻る」ボタンや「ページ内リンク」の移動に対して実装するアニメーションスクロールに関して。

主に下記の記事に掲載されていた内容と過去に書いていたコード等について、個人的な memo.

Contents

CSS

scroll-behavior: smooth プロパティを利用する方法。
IE, Edge, Safari 等で動かないので Polyfill が必要になります。

  • スクロールするコンテナに対してプロパティをあてる。
  • ユーザーエージェント定義のタイミング関数を使い、ユーザーエージェント定義の時間をかけて、円滑にスクロールする。
html {
  scroll-behavior: smooth;
}

アニメーションに特別な指定が無いプロジェクトであれば、現状一番自然な実装かも知れませんね。

jQuery

jQuery を利用した方法

このブログの過去記事に載っていたもので、よくある実装。
意外にも、そのものズバリの記事は書いていませんでした。

$(function() {
    $("#back-to-top").hide();

    $(window).scroll(function() {
        if ($(this).scrollTop() > 60) {
            $("#back-to-top").fadeIn();
        } else {
            $("#back-to-top").fadeOut();
        }
    });

    $("#back-to-top a").click(function() {
        $("body,html").animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

Github で過去のリポジトリを検索したところ、こういった実装も利用していました。
現在は少し実装方法が変わっていました。

// To capsule for WordPress
jQuery(function($) {
    "use strict";

    $('a[href*="#"]:not([href="#"])').click(function () {
        if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');

            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 500);
                return false;
            }
        }
    });
});

その他。

// ページ内リンクのみ取得します。
$('a[href^=#]').click(function(){
    //デフォルトのイベントをキャンセル
    event.preventDefault();

    // 移動先となる要素を取得します。
    var target = $(this.hash);
    if (!target.length) return;

    // 移動先の位置を取得します
    var targetY = target.offset().top;

    // animateで移動します
    $('body').animate({scrollTop: targetY}, 500, 'swing');
});

jQuery Plugin を利用した方法

過去記事掲載。何かのプロジェクトで利用されていて調査しました。

その他。

おまけ。Vue.js のコンポーネント。

JavaScript

Vanilla JavaScript つまり jQuery に依存していない。

Easing

イージングに関する部分のソースを読むと、Robert Penner さんという名前をたびたび見かけます。

その理由？

はっきりとした起源はわからなかったのですが、どうやら、世の中に存在するイージングは、氏の考えたイージングそのものであるか、そのバリエーションであるものが多いようです。イージングのことを調べていると、いつもRobert Pennerという名前が出てきます。

イージングの仕組み – イージングとはなにか | CodeGrid

ライブラリ。

requestAnimationFrame

補遺

HTML

test
<!-- js-scroll-up -->
<div class="js-scroll-up"></div>

CSS

.js-scroll-up {
  background-color: #eee;
  color: #fff;
  cursor: pointer;
  height: 60px;
  width: 60px;

  // layout
  display: none;
  position: fixed;
  bottom: 0;
  right: 0;
}

jQuery

$(() => {
  const win = $(window);
  const jsScrollUp = $('.js-scroll-up');

  win.on('load scroll', function scrollToTop() {
    const scrollValue = $(this).scrollTop();

    if (scrollValue > 100) {
      jsScrollUp.fadeIn();
    } else {
      jsScrollUp.fadeOut();
    }
  });

  jsScrollUp.on('click', () => {
    $('body,html').animate({
      scrollTop: 0,
    }, 500);
  });
});