勉強したことのメモ

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

  関連記事

javascriptでランダム英数字

やりたかった事はjavascriptでランダム英数字の羅列を取得。 ■参考サイト ...

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

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

JavaScriptで全角半角を判別の上で文字数カウントを行う

やりたかった事は「全角5文字・半角10文字以内の入力フォーム」 みたいなもの。 ...

JavaScriptのライブラリ「crypto-js」を使用して暗号化・復号化・ハッシュ化する方法

JavaScriptにてCookie等にデータを保存する際に暗号化したものを保存 ...

CKEditor5(WYSIWYGエディタ)に画像アップロード機能を追加する方法

CKEditor5(ウィジウィグエディタ)に画像アップロード機能を追加したい。公 ...