Hextomino

マウス片手にだらだらネットサーフィンしているときに、「ページの一番上に戻りたい」あるいは「一番下まで進みたい」なんてことはよくあると思います。キーボードのHomeやEndを押せば目的は果たせますが、キーボードまで手を伸ばすのが億劫なことって有りますよね。え？ない？そうですか。

そんなものぐさな願いを叶えるために、マウスだけでページの一番上、あるいは一番下までスクロールできるスクリプトを書いてみました。Opera9.6、Firefox3.5で動作確認。

endhome.user.js

ページの適当な場所をダブルクリックしてみてください。画面の上半分をダブルクリックした場合はページの一番上に、下半分をダブルクリックした場合はページの一番下にスクロールします。

うっかりダブルクリックして予期せぬスクロールをしてしまった場合は、マウスでのスクロールを行わずに再びダブルクリックすると、スクロールする前の位置に戻ります。

マウスジェスチャーで事足りるって話もありますが。代替方法として。

ソースはつづきから。

ダブルクリックしたときのマウスの位置からスクロール先を判別。その後イージングをかけつつスクロールする関数を10msごとに呼び出しています。デフォルトでは一つの処理で40回スクロールする関数を呼び出すようにしています。動作が重い場合は、scrollDiv変数をいじってみてください。

(function() {
	var scrollPos;	// 現在のスクロール位置
	var mousePos;	// ダブルクリック時のマウスカーソルの位置
	
	var scrollDiv = 40;		// スクロールの分割数
	var scrollSpeed = 0.6;	// スクロールスピードの度合い
	var prevScroll;			// 直前にスクロール位置
	var prevScrollType;		// 直前のスクロール内容
	var finishFlag = false;	// homeまたはendスクロール直後かどうか
	
	var to = 0;
	
	// ダブルクリック時
	document.body.addEventListener('dblclick', function(evt) {
		// スクロール位置を取得
		scrollPos = document.body.scrollTop || document.documentElement.scrollTop;
		
		// マウスポインタの位置を取得
		if(evt) mousePos = evt.pageY - scrollPos;
		else 	mousePos = event.y;
		
		// マウスのクリック位置を判定
		var whichHalf = mousePos < (innerHeight / 2) ? 'upper' : 'lower';
		
		// 1. homeまたはendへのスクロール直後で
		// 2. 前回と同じ領域をダブルクリックしていた場合
		if(finishFlag && ((whichHalf == 'upper' && prevScrollType == 'home') || (whichHalf == 'lower' && prevScrollType == 'end'))) {
			to = prevScroll;
			finishFlag = false;
		}
		// 初回、または元の位置に戻った(↑のブロックが実行された)直後
		else {
			prevScroll = scrollPos;
			
			if(whichHalf == 'upper') {
				to = 0;
				prevScrollType = 'home';
			}
			else {
				var height = document.body.scrollHeight || document.documentElement.scrollHeight;
				to = height - innerHeight;
				prevScrollType = 'end';
			}
			
			finishFlag = true;
		}
		
		easyScroll(to);
		
		return false;
	}, false);
	
	document.body.addEventListener('DOMMouseScroll', function() {
		finishFlag = false;
	}, false);
	
	// イージングをかけてスクロール
	function easyScroll(to) {
		for(var i = 0; i <= scrollDiv; i++) {
			var ratio = i / scrollDiv;
			var go = scrollPos - (scrollPos - to) * Math.sin(ratio * Math.PI / 2);	// sinでイージングをかける
			setTimeout('window.scrollTo(0, ' + go + ')', i * 10);
		}
		
		return false;
	}
	
	return false;
})();

何だろう、なんだか･･･読みにくい。