smoothScrollの実装

ページ内をするするっとスクロールするスクリプトを実装する手順のメモ。

スクリプトの読み込み

//smoothScroll.jsの読み込み
<script src="js/smooth-scroll.min.js"></script>
//smoothScrollの実行
<script>
//SmoothScroll
smoothScroll.init({
speed: 1000 ,
updateURL: false,
}) ;
</script>

HTMLの指定

ページトップに戻る場合

<a href="#" data-scroll="">ページトップへ</a>

指定したセクションに移動させる場合

<a href="#section-title" data-scroll="">Section Titleへ移動</a>
<h1 id="#section-title">Section Title</h1>

固定ナビの場合

<!-- Fixed-Top-Header -->
<div data-scroll-header>
  <div>Navigation<div>
</div>

オプションの設定

//smoothScrollの実行
smoothScroll.init({
    selector: '[data-scroll]', // スムーススクロールが有効なリンクに付ける属性
    selectorHeader: '[data-scroll-header]', // 固定ナビに付ける属性
    speed: 500, // スクロールする総時間(ミリ秒)
    easing: 'easeInOutCubic', // スピードのアニメーションパターン
    offset: 0, // 到達場所からズラすピクセル数
    updateURL: false, // URLを[#〜]に変更するかしないか
    callback: function () {} // コールバック関数 (到達時に実行される関数)
 }) ;

easingの種類

easeInQuad だんだんとスピードが上がる。
easeInCubic だんだんとスピードが上がる。後半、急に上がる。
easeInQuart だんだんとスピードが上がる。後半、とても急に上がる。
easeInQuint だんだんとスピードが上がる。後半、さらに急に上がる。
easeInOutQuad 移動開始時と終了時がゆるやかになる。
easeInOutCubic 移動開始時と終了時がゆるやかになる。中盤、急に上がる。
easeInOutQuart 移動開始時と終了時がゆるやかになる。中盤、とても急に上がる。
easeInOutQuint 移動開始時と終了時がゆるやかになる。中盤、さらに急に上がる。
easeOutQuad だんだんとスピードが下がる。
easeOutCubic だんだんとスピードが下がる。前半、急に上がる。
easeOutQuart だんだんとスピードが下がる。前半、急に上がる。
easeOutQuint だんだんとスピードが下がる。前半、急に上がる。

jsファイルは、Github/cferdinandi/smooth-scroll からダウンロード。

jQueryプラグインは、plugins.jquery.com/smooth-scroll から。