バニラ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で多少見た目を整えているが画像に変更する等、適宜調整すること。
関連記事
-
-
JavaScriptの三項演算子
いつもと違う書き方? 使い方の三項演算子が あったのでメモ。 ■ソース var ...
-
-
leaflet.jsとOSMでマーカーの画像をそれぞれ指定する
leaflet.jsとOpenStreetMapでマップ上にマーカーを複数設置し ...
-
-
JavaScriptでデバッグ時にconsole.log以外のメソッドを利用する方法
JavaScriptでデバッグ時は基本的にconsole.logを使って配列やオ ...
-
-
架空の地図画像をLeafletを用いてWeb上でマップ表示する方法
ゲーム攻略サイト等でゲーム内の地図をWeb上で表示し、マーカーを立てたりマウスホ ...
-
-
Video.jsでテーマを指定して動画プレイヤーのデザインを変更する方法
Video.jsで動画プレイヤーのデザインを変更したい。調べたところWordPr ...