様々なサイトでたま～に見かける
スクロールするとふわっと出てくる「ページトップへ」ボタン。
このブログでも一応実装したのでメモ。

よく使われているプラグイン

どこで見かけたか思い出せなかったのですが
google先生に聞いたところよく使われているのは
「jQuery Scroll to Top Control」というプラグインのようです。
→配布先

jQueryを読み込んだ後にこのJSを読み込むだけで「ページトップへ」のフェードのほか、
いわゆる「するするスクロール」?まで実装してくれる便利なプラグインです。
（たくさんのサイトで紹介しているので詳細は省きます。）

気になった点

で、早速試してみたのですが…
jQuery Scroll to Top Controlデモ

• そもそも「するするスクロール」は別のJSで実装している
• 右下に固定はIE6に目を瞑ればCSSのposition:fixed;で実装できる
• JSが効かない環境では「ページトップへ」が表示されない
• 隠れている状態でもボタン自体は存在していてリンクも生きている
  （デモを見てもらえばわかりますがスクロールせず、隠れている状態でも右下にマウスカーソルを持っていくとボタンが存在しているのが確認できます）

上記4点のうち特に4つ目が気になったので改造・自作してみました。

改造・自作してみました

自作版デモ

「するするスクロール」や右下固定は別の手法で実装しているのでスクロールすると出現するというだけのものです。

JSソース

var scrolltotop={

	//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
	setting: {startline:100},

	state: {isvisible:false, shouldvisible:false},

	togglecontrol:function(){

		var scrolltop=jQuery(window).scrollTop()

		this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
		if (this.state.shouldvisible && !this.state.isvisible){
			jQuery("#pageTop").fadeIn("fast");
			this.state.isvisible=true;

		}
		else if (this.state.shouldvisible==false && this.state.isvisible){
			jQuery("#pageTop").fadeOut("fast");
			this.state.isvisible=false;
		}
	},

	init:function(){
		jQuery(document).ready(function($){
			jQuery("#pageTop").hide();
			var mainobj=scrolltotop;

			$(window).bind('scroll resize', function(e){
				mainobj.togglecontrol();
			})
		})
	}
}
scrolltotop.init();

jQueryを読み込んだ後にこのJSを読み込むとid=”pageTop”を設定した要素がスクロールによりフェードイン・アウトします。

え？IE6？？…そんなもの知りませんっ！