バニラ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にてaddEventListenerで実行する関数に対して引数を渡す方法
JavaScriptにてaddEventListenerで実行する関数に対して引 ...
-
-
JavaScriptでtableタグをエクセルファイル(xlsx)としてダウンロードさせる方法
table内のデータを何らかのファイルでダウンロードさせたい。通常PHPでCSV ...
-
-
LightboxをjQuery無しで実装できる「Luminous」の利用方法
あるサイトのコーディングデータを貰った際、jQueryは使用していないのにLig ...
-
-
leaflet.jsとOSMでマップ表示及びマーカー設置方法
GoogleMapAPIを用いたマップ及びマーカー表示にクレジットカード登録が必 ...
-
-
モーダルウィンドウ表示時にウィンドウのスクロール位置をリセットする方法
モーダルウィンドウ内で「縦にスクロール→ウィンドウを閉じる→改めてモーダルウィン ...