JavaScript | ページの最上部にスクロールするボタン

2021-01-292021-02-08JavaScript DOM操作,JavaScript

JavaScriptを使ってページの最上部にスクロールするボタンの実装サンプルです。

トップへ戻るボタンはコンテンツ量が多いサイトでモバイル端末からのアクセス時にユーザビリティを上昇させます。

See the Pen JavaScript | Scroll to top button by yochans (@yochans) on CodePen.

ページの最上部にスクロールするボタンを設置する

サンプルでは設置するボタンにbuttonタグを使用していますが、aタグ、テキストなど自由です。

<button id="scroll-to-top-btn">≫</button>

ボタン用のCSS、固定表示はCSS側で実装しています。

transform: rotateでの回転は「≫」を上向きにしているだけですので、別の文字や記号、アイコンを利用する場合は不要です。

#scroll-to-top-btn{
	position: fixed;
	bottom: 10px;
	right: 10px;
	height: 50px;
	width: 50px;
	color: #FFF;
	font-size: 32px;
	background-color: #9E9E9E;
	border: none;
	border-radius: 50%;
	outline: none;
	transform: rotate(-90deg);
}

ボタンがクリックされた時のイベントを実装。

window.scrollでスクロール位置を最上部のtop:0を指定して移動させます。

//ボタン
const scroll_to_top_btn = document.querySelector('#scroll-to-top-btn');

//クリックイベントを追加
scroll_to_top_btn.addEventListener('click', scroll_to_top);

function scroll_to_top(){
	window.scroll({top: 0, behavior: 'smooth'});
};

一定のスクロールまではボタンを非表示にする

<button id="scroll-to-top-btn">≫</button>

CSSで最後の2行を追加。
opacityで透過度の初期値を0、transition-durationを設定してCSSに変更があった際にフェードン・フェードアウトするようにしています。

#scroll-to-top-btn{
	position: fixed;
	bottom: 10px;
	right: 10px;
	height: 50px;
	width: 50px;
	color: #FFF;
	font-size:30px;
	font-weight: bold;
	background-color:#9E9E9E;
	border: none;
	border-radius: 50%;
	transform: rotate(-90deg);
	opacity: 0;
	transition-duration: 0.5s;
}

JavaScriptではスクロールをトリガーとしたイベントを実装。
スクロール量が一定の区間の場合はボタンのopacityを0、それ以降は1になるようにしてあります。

//ボタン
const scroll_to_top_btn = document.querySelector('#scroll-to-top-btn');

//クリックイベントを追加
scroll_to_top_btn.addEventListener( 'click' , scroll_to_top );

function scroll_to_top(){
	window.scroll({top: 0, behavior: 'smooth'});
};


//スクロール時のイベントを追加
window.addEventListener( 'scroll' , scroll_event );

function scroll_event(){
	
	if(window.pageYOffset > 400){
		scroll_to_top_btn.style.opacity = '1';
	}else	if(window.pageYOffset < 400){
		scroll_to_top_btn.style.opacity = '0';
	}
	
};