jQueryでマウスホイールすると余韻が残るイージングスクロールをつくる

プラグインのダウンロード

jQueryはもちろんのことですが、ここではマウスホイールを検出するために「MOUSE WHEEL EXTENSION」と、かっこよくスクロールするために「jquery.easie.js」というプラグインを使用します。

MOUSE WHEEL EXTENSION
jquery.easie.js

javascript

javascriptのコードは以下のようになります。

javascript

	<script type="text/javascript" src="jquery1.5.1.js"></script>
	<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
	<script type="text/javascript" src="jquery.easie.js"></script>
	<script type="text/javascript">
	$(function() {
		var scrolly = 0;
		var speed = 500;
		$('html').mousewheel(function(event, mov) {
			if(jQuery.browser.webkit){
				if (mov > 0) scrolly =  $('body').scrollTop() - speed;
				else if (mov < 0) scrolly =  $('body').scrollTop() + speed;
			} else {
				if (mov > 0) scrolly =  $('html').scrollTop() - speed;
				else if (mov < 0) scrolly =  $('html').scrollTop() + speed;
			}
			$('html,body')
				.stop()
				.animate({scrollTop: scrolly}, 'slow',$.easie(0,0,0,1));
				//イージングプラグイン使わない場合
				//.animate({ scrollTop: scrolly }, 'normal');
			return false;
		});
	});
	</script>
	

「mousewheel」の中にマウスホイールしたときの処理を記述します。
「mov」でスクロール方向を取得できますので、0以上か以下で分岐させればいいんですね。
あまり上手いやり方ではないと思いますが、Webkit系のブラウザではbodyを、その他のブラウザではhtmlをスクロールさせないといけないので処理が２つになっております。
speedという変数でスピード（というか移動量）が調節できます。