@programming
2019/10/1 13:49 更新✏
HTMLへコピペだけで実現する「トップへ戻る」ボタン (GTT)
一般的なWebページでスクロールダウンした時に右下に出てきてクリックするとページトップへスルスルとスクロールバックするボタン（「トップへ戻る」や「Go to Top」みたいなやつ）ってよく見かけますよね。あのボタン (便宜上ここではGTTボタンと呼びます) を60行足らずのJavaScriptコードのコピペだけで実現できます。今回ご紹介する方法は、外部ライブラリに jQuery (非slim版) を使いますが、それ以外のモジュールは必要ありません。
目次
準備
まずはHTMLの<head>内で jQuery を読み込んでおいてください:
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>コード
以下のコードを</body>の直前あたりに設置した<script>の中にコピペします:
/**
* Go to Top (GTT)または Go to Bottom (GTB)ボタン要素の作成＆body要素への追加
* @param {Boolean} gtb - GTBボタンかどうか。デフォルトはfalse(GTTボタン)
* @author 芽萌丸プログラミング部 {@link https://memo.appri.me/programming/}
*/
function appendGT(gtb = false) {
const elId = (gtb === false) ? "btn-gtt-" + Date.now() : "btn-gtb-" + Date.now();
let css = {
"position": "fixed",
"bottom": (gtb === false) ? "80px" : "20px",
"right": "20px",
"z-index": "9999",
"text-align": "center",
"color": "#bbb",
"cursor": "pointer",
"display": "none",
"font-size": "2.0em",
"padding": "8px",
};
let $icon;
if (gtb === false) {
$icon = $(`<span>↑</span>`);
} else {
$icon = $(`<span>↓</span>`);
}
const $j = $("<div>")
.attr("id", elId)
.css(css)
.append($icon);
const $window = $(window);
const $htmlbody = $("html,body");
const $body = $("body");
const $document = $(document);
// add click event:
$j.on("click", function(e) {
$htmlbody.animate({
scrollTop: (gtb === false) ? $htmlbody.offset().top : $htmlbody.outerHeight(),
}, 300);
});
// append to body:
$body.append($j);
// NOTE: Default: the button appears when window scrolled to a position as double of screen height
const shownAt = (gtb === false) ? 500 : 0;
// add window scroll event:
window.addEventListener("scroll", function() {
const docScrollTop = $document.scrollTop();
/** FadeIn/Out of #btn-go-to-top */
if (gtb === false) {
if (docScrollTop >= shownAt) {
$j.fadeIn();
} else {
$j.fadeOut();
}
} else {
if (docScrollTop + screen.height >= $htmlbody.outerHeight() - 500) {
$j.fadeOut();
} else {
$j.fadeIn();
}
}
}, false);
}
// ボタンを追加
appendGT(false); // Go to Top
appendGT(true); // Go to Bottomはい、たったこれだけでGTTボタン(とGTBボタン)が設置されます。
appendGT関数がコード本体です。appendGT()の実行でbody要素へGTTボタン（またはGTBボタン）が追加されます。
カスタマイズ
以下の箇所でデザインを弄ることができます:
// スタイル:
let css = {
"position": "fixed",
"bottom": (gtb === false) ? "80px" : "20px",
"right": "20px",
"z-index": "9999",
"text-align": "center",
"color": "#bbb",
"cursor": "pointer",
"display": "none",
"font-size": "2.0em",
"padding": "8px",
};
...
// アイコン
if (gtb === false) {
$icon = $(`<span>↑</span>`);
} else {
$icon = $(`<span>↓</span>`);
}
// NOTE: 上記の替りにfontawesomeを使うと少し見栄えが良くなります:
// if (gtb === false) {
// $icon = $(`<span><i class="fas fa-arrow-circle-up"></i></span>`);
// } else {
// $icon = $(`<span><i class="fas fa-arrow-circle-down"></i></span>`);
// }スクロールスピードの調整:
$htmlbody.animate({
scrollTop: (gtb === false) ? $htmlbody.offset().top : $htmlbody.outerHeight(),
}, 300); // <== 300を弄るボタン出現位置の調整:
// 500の部分を調整すれば、GTTボタンの出現位置を変更できます:
const shownAt = (gtb === false) ? 500 : 0;
...
// 500の部分を調整すれば、GTBボタンの消滅位置を変更できます:
if (docScrollTop + screen.height >= $htmlbody.outerHeight() - 500) {
以上です。
芽萌丸プログラミング部@programming
プログラミング関連アカウント。Web標準技術を中心に書いていきます。フロントエンドからサーバサイドまで JavaScript だけで済ませたい人たちの集いです。記事は主に @TanakaSoftwareLab が担当。