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

コーポレートサイトにちょうどいい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があるページなどで有効です。