jQuery

【jQuery】同じページのアンカーへのスムーズなページスクロールを実行jquery.smoothPageScroll

August 28, 2016

jquery.smoothPageScrollは同じページのアンカーへのスムーズなページスクロールを実行

Usage

<script src="js/jquery.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.smoothPageScroll.js"></script>
<script>
$.smoothPageScrollByLoaded();
$('a[href^="#"]').smoothPageScroll();
</script>

$('h1').smoothPageScroll({
    target: '#header'
});

$('a[href^="#"]').smoothPageScroll({
    complate: function(e) {
        console.log(e);
    }
});

$.smoothPageScrollStart({
    target: '#header'
});

Options

easing	イージングのタイプ
speed	スクロールスピード
delay	スタートをスクロールするまでの遅延時間
target	ターゲットを指定
complate	スクロールが完了した後に実行
isAddHash	スクロール後にハッシュを追加
isTopScroll	垂直方向にスクロール
isLeftScroll	水平方向にスクロール

初期設定

$.smoothPageScrollByLoaded({
    easing: 'easeOutQuart',
    speed: 1000,
    complate:'',
    target: location.hash,
    isAddHash: true,
    isTopScroll: true,
    isLeftScroll: true
});

$('a[href^="#"]').smoothPageScroll({
    easing: 'easeOutQuart',
    speed: 1000,
    delay: 0,
    target: undefined,
    complate: '',
    isAddHash: true,
    isTopScroll: true,
    isLeftScroll: true
});

MITライセンス

Demo/Download