←戻る

スクロールでトップに戻るボタンをjQueryで実装

デモ/サンプル

下へ少しスクロールすると右側に「トップへ戻る」ボタンが出てきます。

トップ

		$(document).ready(function() {
			var pagetop = $('.pagetop');
			$(window).scroll(function () {
				if ($(this).scrollTop() > 100) {
					pagetop.fadeIn();
				} else {
					pagetop.fadeOut();
				}
			});
		    pagetop.click(function () {
				$('body, html').animate({ scrollTop: 0 }, 500);
				return false;
		    });
		});

.pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 30px;
}
.pagetop a {
	display: block;
	background-color: #ccc;
	text-align: center;
	color: #222;
	font-size: 12px;
	text-decoration: none;
	padding: 20px 10px;
}

.pagetop a:hover {
	display: block;
	background-color: #222;
	text-align: center;
	color: #fff;
	font-size: 12px;
	text-decoration: none;
    padding:20px 10px;
}

トップ

ホームページ制作 埼玉WEB制作事務所-クローバーインターナショナル