ウェブデザイナーの毎日のお仕事のメモ - mainichi web まいにちウェブ

作成日:2019.10.02  最終更新日:2021.07.20

js / jQuery

ページトップに戻るボタンをjqueryで簡単に実装

ページの下の方にある、押したら上にするするっと上がっていくボタン、ページトップに戻るボタンの作り方です。

一番シンプルなページトップに戻るボタンの作り方

まずは一番シンプルに、ページの下に常にページトップボタンが用意されているパターンです。

コード

HTML

<p id="pagetop">
  <a href="#">↑pagetop↑</a>
</p>

JS

$('#pagetop').click(function () {
 $('body,html').animate({
  scrollTop: 0
 }, 700);
 return false;
});

スクロールすると表示されるページトップに戻るボタンの作り方

ページトップに戻るためのボタンが、最初は表示されていないけど、スクロールするとふわっと表示されるサンプルです。

コード

HTML

<p id="pagetop">
 <a href="#"><span>↑</span><br>pagetop</a>
</p>

CSS

#pagetop {
 display:inline-block;
 position:fixed;
 bottom:0;
 right:0;
}


#pagetop a {
 padding:20px 10px;
 display:block;
 background:#008b8b;
 color:#fff;
 text-align:center;
}

JS

$('#pagetop').hide();
 $(window).scroll(function () {
  if ($(this).scrollTop() > 300) {
   $('#pagetop').fadeIn();
  } else {
   $('#pagetop').fadeOut();
  }
});

$('#pagetop').click(function () {
 $('body,html').animate({
  scrollTop: 0
 }, 700);
 return false;
});

スクロールすると表示されてフッターの上で止まるページトップに戻るボタンの作り方

ページトップに戻るためのボタンが、最初は表示されていないけど、スクロールするとふわっと表示されて、フッターの上でピタッと止まるサンプルです。

HTML

<p id="pagetop">
 <a href="#"><span>↑</span><br>pagetop</a>
</p>

CSS

#pagetop {
 display:inline-block;
 position:fixed;
 bottom:0;
 right:0;
}


#pagetop a {
 padding:20px 10px;
 display:block;
 background:#008b8b;
 color:#fff;
 text-align:center;
}

JS

var pagetopBtn = $('#pagetop');
	pagetopBtn.hide();

	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			pagetopBtn.fadeIn();
		} else {
			pagetopBtn.fadeOut();
		}
	});

	$(window).scroll(function () {
		var height = $(document).height();
		var position = $(window).height() + $(window).scrollTop();
		var footer = $("footer").outerHeight();
		if ( height - position  < footer ) {
			pagetopBtn.css({
				bottom : footer
			});
		} else {
			pagetopBtn.css({
				position : "fixed",
				bottom: 0
			});
		}
	});


	pagetopBtn.click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 500);
		return false;
	});

最新記事