勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptだけでTOPへ戻るリンクの表示

   2014/07/04  JavaScript

ページ内をある程度スクロールすると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

  関連記事

JavaScriptでWebカメラやスマホカメラを利用してQRコードを読み取りURLを返す方法

JavaScriptのjsQRというライブラリで簡単にWebページ版QRコードリ ...

テキストエリアを自動でリサイズ

改行するだけで勝手にリサイズしてくれるので、 ユーザー用でも管理用でも使えそう。 ...

JavaScriptでbodyタグ内に特定のClass要素が追加された際イベントを発火させる方法

ASPを使用したサイトでページ内に特定のClass要素が追加された際にJSでイベ ...

YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法

以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...

Lightboxで文字をクリックしたら画像を表示させる方法

Lightboxを使用する際、一般的に使われているのはサムネイル画像をクリックす ...