制作の現場から  
  ページの先頭へ戻るボタン(jQuery)
2018
14
Mar

ページの先頭へ戻るボタン(jQuery)


//適当なjsファイルに以下を記入する

$(function() {
	var up = $( '#pageTop' );
	up.hide();
	$(window).scroll(function() {
		if ( $(this).scrollTop() > 200 ) { //数字の200はスクロールした距離
			up.fadeIn();
		}else{
			up.fadeOut();
		}
	});
	up.click(function() {
		$('body,html').animate( { scrollTop: 0 }, 500 ); //数字の500は画面トップに戻るためにかかる時間
		return false;
	});
});

適当な位置に下記を設置する


<div id="pageTop"><a href="#">top</a></div>

デザインは適当に作ってください。当サイトの場合は画面右下に赤丸で囲まれたtopという文字が表れます。

 

top