このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/animatescroll.js"></script>
<script>
	$(window).load(function(){
		if(chkInLightBox()) {			
			$('#AnimateScrollBtnStart').on('click.AnimateScroll', function(){
				$('body').append('<div id="AnimateScrollLayer"></div>');
				$('#AnimateScrollLayer').append($('#AnimateScroll .inner')).fadeIn(500);
				$('body').scrollTop(0);
				$('#colorbox').hide();
				
				$('#AnimateScrollLayer .AnimateScroll-Close-btn').one('click.AnimateScroll', function(){
					$('#AnimateScroll th').append($('#AnimateScrollLayer .inner'));
					$('#AnimateScrollLayer').fadeOut(300, function(){$(this).remove();});
					$('#AnimateScroll .AnimateScroll-btn02').removeClass('checked');
					$('#colorbox').show();
				});
			});					
			
			initLightBoxDisabled(function(){
				$(document).off('click.AnimateScroll');
			});
		}
		
		$(document).on('click.AnimateScroll', '.AnimateScroll-btn01', function(){
			$('.AnimateScroll-btn02').animatescroll({scrollSpeed: 300});
		});
		
		$(document).on('click.AnimateScroll', '.AnimateScroll-btn02', function(){
			var $this = $(this);
			var _easing = $this.text();
			$this.addClass('checked');				
			$('#AnimateScrollBtn02').animatescroll({scrollSpeed: 2000, easing: _easing});
		});
	});
</script>
<button id="AnimateScrollBtnStart" class="red">AnimateScrollってみる</button>
<div id="AnimateScrollDemo">	
	<button class="yellow AnimateScroll-Close-btn">閉じる</button><button id="AnimateScrollBtn01" class="green AnimateScroll-btn01">下へ行く</button>

	<button id="AnimateScrollBtn03" class="yellow AnimateScroll-Close-btn">閉じる</button><button id="AnimateScrollBtn02" class="green AnimateScroll-btn01">下へ行く</button>
	
	<div id="AnimateScrollBox">
		<button class="green AnimateScroll-btn02">swing</button>
		<button class="green AnimateScroll-btn02">easeInQuad</button>
		<button class="green AnimateScroll-btn02">easeOutQuad</button>
		<button class="green AnimateScroll-btn02">easeInOutQuad</button>
		<button class="green AnimateScroll-btn02">easeInCubic</button>
		<button class="green AnimateScroll-btn02">easeOutCubic</button>
		<button class="green AnimateScroll-btn02">easeInOutCubic</button>
		<button class="green AnimateScroll-btn02">easeInQuart</button>
		<button class="green AnimateScroll-btn02">easeOutQuart</button>
		<button class="green AnimateScroll-btn02">easeInOutQuart</button>
		<button class="green AnimateScroll-btn02">easeInQuint</button>
		<button class="green AnimateScroll-btn02">easeOutQuint</button>
		<button class="green AnimateScroll-btn02">easeInOutQuint</button>
		<button class="green AnimateScroll-btn02">easeInSine</button>
		<button class="green AnimateScroll-btn02">easeOutSine</button>
		<button class="green AnimateScroll-btn02">easeInOutSine</button>
		<button class="green AnimateScroll-btn02">easeInExpo</button>
		<button class="green AnimateScroll-btn02">easeOutExpo</button>
		<button class="green AnimateScroll-btn02">easeInOutExpo</button>
		<button class="green AnimateScroll-btn02">easeInCirc</button>
		<button class="green AnimateScroll-btn02">easeOutCirc</button>
		<button class="green AnimateScroll-btn02">easeInOutCirc</button>
		<button class="green AnimateScroll-btn02">easeInElastic</button>
		<button class="green AnimateScroll-btn02">easeOutElastic</button>
		<button class="green AnimateScroll-btn02">easeInOutElastic</button>
		<button class="green AnimateScroll-btn02">easeInBack</button>
		<button class="green AnimateScroll-btn02">easeOutBack</button>
		<button class="green AnimateScroll-btn02">easeInOutBack</button>
		<button class="green AnimateScroll-btn02">easeInBounce</button>
		<button class="green AnimateScroll-btn02">easeOutBounce</button>
		<button class="green AnimateScroll-btn02">easeInOutBounce</button>
		<button class="yellow AnimateScroll-Close-btn">閉じる</button>
	</div>
</div>

AnimateScrollについて

AnimateScrollは、よくあるページのトップにスクロールで戻る系のプラグインです。
他との違いは、イージングが設定できるということです。その数20種類近く!
EASEOUTELASTICを使うと酔っちゃうかも。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • slideToucher

    slideToucher

    上下左右方向へのスワイプ、スライドを実装できる

  • OverScroll

    OverScroll

    PCブラウザ上でスマホのスワイプ機能を実現できる

  • List

    List

    スクロールしても見出し部分を固定したまま表示

  • scrollUp

    scrollUp

    ページを一定量スクロールすると、ページトップへ戻るボタンを表示

  • ContainedStickyScroll

    ContainedStickyScroll

    スクロールしてもどこまでもついてくるあの子