jQuery

【jQuery】スムーズにスクロールしてぼかしやバウンド効果を追加するAnchorScroll.js

May 4, 2017
ANCHORSCROLL.JS

AnchorScroll.jsはスムーズにスクロールしてターゲットを固定し、スクロールイベントの要素にクラスを追加するための軽量のjQueryプラグイン。

Initialization & Settings

$('.anchor-scroll').anchorScroll({
    scrollSpeed: 800, // scroll speed
    offsetTop: 0, // offset for fixed top bars (defaults to 0)
    onScroll: function () { 
      // callback on scroll start
    },
    scrollEnd: function () { 
      // callback on scroll end
    }
 });

アンカーリンクにデータ属性を追加

  1. data-class-to
  2. data-on-scroll
  3. data-scroll-end

HTML Examples

<!-- Add class "blur-effect" to body on scroll --> 
<a href="#div-1" class="anchor-scroll" data-class-to="body" data-on-scroll="blur-effect"></a>

<!-- Add class "bounce" to anchor target (#div-2) at end of scroll --> 
<a href="#div-2" class="anchor-scroll" data-class-to="#div-2" data-scroll-end="bounce"></a>

MIT