baserJSでスクロール位置の移動をアニメーションさせる

  • 0
    いいね
  • 0
    コメント
    この記事は最終更新日から1年以上が経過しています。

    コーポレートサイトにちょうどいいJavaScriptライブラリ baserJS の解説記事です。

    Webサイトと詳しいAPIリファレンスはこちら baserJS Webサイト

    基本

    HTML

    aタグのhrefの中の文字列をセレクタとして、その場所に徐々にスクロールするようになります。

    <a href="#target1">target1</a>
    <a href="#target2">target2</a>
    <a href="#target3">target3</a>
    
    . . .
    
    <div id="target1">...</div>
    
    . . .
    
    <div id="target2">...</div>
    
    . . .
    
    <div id="target3">...</div>
    

    JavaScript

    $('a, area').bcScrollTo();
    

    href属性をもつことのできる要素に限るので、aタグか、もしくはイメージマップのarea要素が対象になります。

    任意のセレクターでJS側から呼び出す

    $.bcScrollTo('selector');
    

    静的メソッドを使って、プログラム側から制御することもできます。

    数値で指定

    $.bcScrollTo(1200);
    

    任意のスクロール位置を数値で指定することもできます。

    オプション

    $('a').bcScrollTo({
        offset: 60
    });
    

    offsetオプションに数値を指定すれば、目的のスクロール位置をずらすことができます。

    固定ヘッダのUIがあるページなどで有効です。

    この投稿は baserJS Advent Calendar 20147日目の記事です。