勉強したことのメモ

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

  関連記事

Video.jsで表示させた動画プレイヤーに指定したテキスト表示し、位置をランダムに変更する方法

Video.jsで表示させた動画プレイヤーに指定したテキスト表示し、さらにそのテ ...

javascriptでHTML内に関数を書きたい場合

ダイアログ確認したいだけでわざわざfunctionを書くのもアレだという時に使い ...

JavaScriptにて数値のカウントアップ及びカウントダウンを表示する「countUp.js」ライブラリの利用方法

だいぶ前にバニラJSにて数値のカウントアップ及びカウントダウン表示を行う方法をメ ...

Leafletにてマップ移動時にURLに座標を自動付与する「leaflet-view-meta」プラグインの利用方法

Googleマップだとマップを移動した際、URLに座標(経度緯度)が付与されるた ...

jQueryにて何らかの処理中にブラウザをロックする「waitMe」プラグインの利用方法

jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたい。 ...