Blog

2013.0311

スムーススクロール用JavaScript

aタグhrefに#からはじまる文字列が記述されている場合、
クリックするとアンカー先までスムーススクロールします。
jQuery等のライブラリは必要なく単独で動きます。
※目的地にスクロールした場合、時々カクって動いてしまう現象を修正しました。(2013年3月11日)

設置方法1

head要素内にsmoothscroll.jsを読み込みます。

<script type="text/javascript" src="smoothscroll.js"></script>

設置方法2

下記を適当な場所へ記述してください。
※設定は「設定可能オプション」をご覧ください。
※オプションの最後は,を付けないでください。

var atscroll = new ATScroll({
	noScroll : 'noSmoothScroll',
	setHash : false,
	duration : 800,
	interval : 10,
	animation : 'quinticOut'
});
atscroll.load();

設定可能オプション

noScroll : ‘noSmoothScroll’
スムーススクロールさせたくないClass名が設定可能です
(初期値はnoSmoothScroll、noSmoothScrollの場合この記述は必要ありません)

setHash : false
スムーススクロール到着後ハッシュを付加するかの設定です。trueでハッシュを付けます
(初期値はfalse、falseの場合この記述は必要ありません)

duration : 800
アニメーションの時間の長さです。
(初期値は800、800の場合この記述は必要ありません)

interval : 10
アニメーションを処理させるための一定間隔の時間です。
(初期値は10、10の場合この記述は必要ありません)

animation : ‘quinticOut’
アニメーションの種類が設定可能です。liner、quinticOut、quinticInの3種類の動きが可能です。
(初期値はquinticOut、quinticOutの場合この記述は必要ありません)

Page Top