シンプルな上に戻るボタンのメモ。
スクロールするとふわっと表示される仕様。
サンプルは「↑」のテキストを入れているけど、画像やfontawesome、CSSで作った図形など好きに変更できる。
hoverするとちょっとだけ上に動くようにした。
スクロールで表示される上に戻るボタン
HTML
<div id="to-top" class="to-top">↑</div>
CSS
#to-top {
opacity: 0;
}
#to-top.is-show {
position: fixed;
color: #333;
font-size: 50px;
opacity: 0.6;
transition: opacity 2s;
cursor: pointer;
bottom: 15px;
right: 15px;
}
#to-top:hover {
transition: .5s;
bottom: 25px;
}
JavaScript
function toTopBtn() {
return ( window.pageYOffset !== undefined ) ? window.pageYOffset: document.documentElement.scrollTop;
}
//トップに戻るボタンの要素を取得
var topButton = document.getElementById( 'to-top' );
//ボタンの表示・非表示
window.onscroll = function() {
( toTopBtn() > 500 ) ? topButton.classList.add( 'is-show' ): topButton.classList.remove( 'is-show' );
};
//トップに移動する関数
function scrollToTop() {
var scrolled = toTopBtn();
window.scrollTo( 0, Math.floor( scrolled / 2 ) );
if ( scrolled > 0 ) {
window.setTimeout( scrollToTop, 30 );
}
};
//イベント登録
topButton.onclick = function() {
scrollToTop();
};
参考サイト
https://tomotan.hateblo.jp/entry/web-top-of-page
こちらのサイトを参考にさせていただきました。
詳しく丁寧に解説されているのでぜひご覧ください。