勉強したことのメモ

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

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

2013/12/06 2014/07/04

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<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>

関連記事

: テキストエリアのリアルタイムプレビュー

テキストエリア内に書いた内容をリアルタイムでプレビューする機能が必要となり、教 ...

: GoogleMapでメインカラーを変更する方法

GoogleMapAPIを用いたMAPでカラー変更をしたかった。カラーコードの指 ...

: CSSとJavaScriptでテキストのコピー防止

あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...

: Highstockの使い方とカスタマイズ

株価などの値動きを図表とするローソク足のグラフを何らかの方法で描写したかった。調 ...

: GoogleMapAPIでヒートマップを表示する方法

GoogleMapAPIで花粉状況や雨量を可視化しやすいようなヒートマップ的なも ...

: クロスドメインのiframeで子フレームから親フレームにheightの値を渡す

やりたかった事は、・iframeで子フレームから親フレームにheightの値を ...

: youtubeの埋め込みをポップアップ表示させる方法

youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...

: JavaScriptの三項演算子

いつもと違う書き方？　使い方の三項演算子があったのでメモ。 ■ソース var ...

: javascriptで画像を取り扱う際の注意

javascriptで画像を取り扱う際に、ちゃんと要素を指定しているのにも関わ ...

: JavaScriptで住所から経度緯度を取得する

やりたかった事はformに住所を入れてsubmitする際に、javascript ...

PREV: jQueryでIPから位置情報の取得
NEXT: プラグインを使用せず、jQueryでオートページャー