JavaScriptテックラボ

jQueryとjQuery.ScrollToプラグインを使ってトップに戻るボタンを作る

下にスクロールするとトップに戻るボタンが表示され、クリックするとスムーズにスクロールしながらトップに戻るというスクリプトを書きました。

まずはjQueryとそのプラグインjQuery.ScrollToをダウンロード。

http://flesler.blogspot.com/search/label/jQuery.ScrollTo
jQueryダウンロードページ

保存したファイルを読み込みます。

 
<script src="smoothscroll.js"></script>
<script src="jquery.js"></script>

次にjQuery.ScrollToを使ってトップに戻るボタンを実現するJSを書きます。
トップにある状態では表示されず、下にある程度スクロールしたらボタンが表示される仕様だと、だいたい次のようなソースになります。

 
<script>
// プラグイン
jQuery.fn.topLink = function(settings) {
	settings = jQuery.extend({
		min: 1,
		fadeSpeed: 200
	}, settings);
	return this.each(function() {
		var el = $(this);
		el.hide();
		$(window).scroll(function() {
			if($(window).scrollTop() >= settings.min){
				el.fadeIn(settings.fadeSpeed);
			} else {
				el.fadeOut(settings.fadeSpeed);
			}
		});
	});
};

// usage http://flesler.blogspot.com/search/label/jQuery.ScrollTo
$(function() {
	$('#top-link').topLink({
		min: 400,
		fadeSpeed: 200
	});
	$('#top-link').click(function(e) {
		e.preventDefault();
		$.scrollTo(0,300);
	});
});
</script>

あとはHTMLとCSSを用意するだけです。
フッタあたりに次のようなリンクを作成します。
HREF属性には#top、ID属性にはtop-linkを指定します。

 
<a href="#top" id="top-link">Jump to the top</a>

CSSは最低限下記が設定しておけば問題ありません。

 
#top-link{
	display:none;
	position:fixed;
	right: 10px; bottom: 100px;
}

関連記事