勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

バニラJavaScriptでTOPへ戻る機能(ボタン)の作成方法

   2024/05/22  JavaScript

ページ内をある程度スクロールするとTOPへ戻るリンクを表示させたかった。ただ、複数のページに設置する必要があり、ページによってはjQueryを使用していないところがあるのでバニラJavaScriptのみで対応したい。以下にソースコードをメモ。

 

ソースコード

<a href="#top" id="backtop" style="bottom: 20px;display: none;position: fixed;right: 20px;z-index: 9999; padding: 10px; background: #262626; color:#fff;">TOPへ</a>
<script>
if (document.addEventListener) {
    window.addEventListener("scroll", scrollToggle, false);
} else {
    window.attachEvent("onscroll", scrollToggle);
}
function scrollToggle(e){
    var scl = document.documentElement.scrollTop || document.body.scrollTop;
    document.getElementById("backtop").style.display = scl > 300 ? 'block' : 'none'; //ここでスクロール量を変えられる。
}
</script>

 

その他

トップに戻るボタンはインラインのCSSで多少見た目を整えているが画像に変更する等、適宜調整すること。

 - JavaScript

  関連記事

jQueryの画像スライダー用プラグイン「slick」の使い方

jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...

Video.jsで動画プレイヤーのシークバーを非表示にし早送りさせない方法

Video.jsで動画を早送りさせないようシークバーを非表示にしたい。ただ、オプ ...

leaflet.jsとOSMでマップ表示及びマーカー設置方法

GoogleMapAPIを用いたマップ及びマーカー表示にクレジットカード登録が必 ...

JavaScriptのマップ用ライブラリ「MapLibre GL JS」の利用方法

あるサイトをWappalyzerで調査していた際に「MapLibre GL JS ...

JavaScriptにて領収書等のテンプレートHTMLページをPDFファイル化させる方法(html2pdf)

JavaScriptにてhtml2pdfというライブラリを使用することでHTML ...