勉強したことのメモ

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

  関連記事

SNSのシェア(いいね)ボタンを設置できるjQueryプラグイン「jsSocials」の利用方法

サイト内にSNSのシェア(いいね)ボタンを設置する際、WordPressだと何ら ...

Chart.jsで横スクロール可能なグラフを表示させる方法

Chart.jsで折れ線グラフを表示するページがあった。過去1年分のデータをグラ ...

Leafletでマーカーをグループ化し、チェックボックスの状態により表示非表示を切り替える方法

LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...

videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法

Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...

formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...