JavaScriptだけでTOPへ戻るリンクの表示
ページ内をある程度スクロールするとTOPへ戻るリンクを
表示させたかった。
ただ、複数のページに設置する必要があり、
ページによってはjQueryを使用していないところがあるので、
JavaScriptのみで行いたい。
と思って探したらよさげなソースがあったのでメモ。
<!--TOPへ戻る--> <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> <!--TOPへ戻る-->
関連記事
-
-
Lightboxで画像拡大時に閉じるボタンの位置を右上に変更
Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...
-
-
jQueryで年月日と時間のピッカー(datetimepicker)
jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にboots ...
-
-
JavaScriptでフォームの禁止ワード制限
掲示板等で本文を送信する際に、予め定めていた禁止ワードが含まれていないかチェック ...
-
-
jQueryやJavaScriptで認識違いしていたところのメモ(高速化)
認識違いしていたり、知らなかったりでもっと高速な 処理を行えそうな点があったので ...
-
-
jQuery UIでカレンダーピッカー(Datepicker)の利用方法
フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...
-
-
HTML、javascriptソースの暗号化
サーバーサイドはソースを見られないけどクライアントサイドはソースを見られるので、 ...
-
-
JavaScriptのbeforeunloadイベントでページの離脱防止
何らかのformがあるページで各種内容を入力後に何らかのリンクをクリックする等、 ...
-
-
複数のajax処理の結果をまとめて表示
同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...
-
-
CSSとJavaScriptでテキストのコピー防止
あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...
-
-
jquery.cookie.jsで「$.cookie is not a function」エラー
フロントエンド側でCookieを利用したい場合jquery-cookieを用いる ...
- PREV
- jQueryでIPから位置情報の取得
- NEXT
- プラグインを使用せず、jQueryでオートページャー