勉強したことのメモ

webプログラマが勉強したことのメモ。

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へ戻る-->

 

 - JavaScript

  関連記事

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を用いる ...