「ページトップに戻る」プログラムの実装

12月に入って1週が過ぎて行く頃、いろんなところにクリスマスシーズン！

今年のクリスマスは賑やかになれることを祈ってます。

あと3週間ぐらいで年末。

家の不要なものがなかなか片付けられない…

さてと、話題を取り戻して…

「ページトップに戻る」プログラムの実装

Webページを作っていく中で、ほとんど「ページトップに戻る」のプログラムが定番になっていますね。

丸暗記で、プログラムを作ったりしていましたが…

エラーで、ページトップに戻らない原因が発覚…

プログラムのコード記述ミスでした。

ここは反省と忘備録として残していきます。

<p class="pagetop"><a href="#content" title="Page Top">Page Top</a></p>

CSSは好みにデザインをしてください。

.pagetop {
	bottom: 20px;
	position: fixed;
	right: 20px;
}

.pagetop a {
	background: #333;
	color: #FFF;
	display: block;
	height: 50px;
	text-align: center;
	width: 50px;
}

次にjavascriptの記述方法

//pagetop
$(function() {
	var topBtn = $('.pagetop');
	topBtn.hide();
	// スクロールが100に達したらボタン表示
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
		// ボタンの表示方法
			topBtn.fadeIn();
		} else {
	// ボタンの非表示方法
			topBtn.fadeOut();
		}
	});
	// スクロールしてトップ
	topBtn.click(function () {
	$('body,  html').animate({
		scrollTop: 0
		}, 500); // トップに戻るときのスピード
		return false;
	});
});

以上、技術の忘備録でした。

いろんなネットに載っていましたが、いろんなアニメーションの動きとかあるそうですね。

Webサイトに合わせて、いろんなアニメーションを合わせて実装してみてくださいね。

では、また！