バニラJavaScriptでTOPへ戻る機能(ボタン)の作成方法
2024/05/22
ページ内をある程度スクロールすると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で多少見た目を整えているが画像に変更する等、適宜調整すること。
関連記事
-
-
tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法
tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...
-
-
JavaScriptで指定した変数が未定義(未宣言)かチェックする方法
JavaScriptで指定した変数が未定義(未宣言)かチェックしたいというケース ...
-
-
JavaScriptでlocalStorageを簡単に操作できる「store.js」ライブラリの利用方法
以前Dexie.jsを利用してIndexedDBを取り扱う方法をメモしたが、今回 ...
-
-
table内のiframeのheightを最大高さにする
tableのtdの中にリンクがあり、クリックすると td内でiframeが開く。 ...
-
-
JavaScriptでテンプレート文字列(テンプレートリテラル)の利用方法
あるJavaScriptのソースコードを拝見した際に変数っぽいのにバッククォート ...