勉強したことのメモ

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>

関連記事

: GoogleMapAPIで現在地を更新する方法

GoogleMapAPIを使って現在地を取得してその場所にマーカーを設置、その後 ...

: IEでjavascript関数の初期値

あるJavaScriptの関数でchromeやfirefoxは正常に動いたけどI ...

: GoogleMapで半径●メートルを範囲表示

GoogleMapでマーカーを立てて、そこから範囲●mもしくは●kmを円で表示さ ...

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

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

: highcharts.jsについて

プログラムの作りかえを行う際、既存のソースで highcharts.jsを使って ...

: GoogleMapsAPIでマーカーが全て表示されるように自動ズーム

GoogleMapsAPIでマーカーを複数設置した場合にズームの値や、マーカーの ...

: PHPで位置情報を取得してGoogleMapAPIで使用する方法

GPSみたいな位置情報をPHPで取得し、GoogleMapAPIでその場所を反映 ...

: setTimeoutの注意点

javascriptのsetTimeoutにて変数を用いた際に想定外の挙動を起 ...

: javascriptの文末

下記みたいなコードがあって、文末に｢;｣が無いのになんで動くのこれ？　となった ...

: Android2.3でJavaScriptのエラー

Android2.3で関数が動かないといったエラーが発生していた。担当外だった ...

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