勉強したことのメモ

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>

関連記事

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

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

: javascriptでのエラーログ

PHPでのエラーログ取りが思いのほか便利だったので JSについても簡単にログ取り ...

: javascriptでのについて

javascriptを書く際に、 <script> <!-- ...

: JavaScriptでURLのクエリを取得する２

直近で調べたのとは別に、 http://aaa.bbb/ccc/id123?te ...

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

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

: 日付入力のテキストフォームにカレンダープラグインを導入

やりたかった事と制限は下記の通り。・日付入力のテキストフォームにカレンダープラ ...

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

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

: IE&javascriptの予約語

前にもひっかかった問題で、今日同じことで時間をとられたのでメモ。予約語？　っ ...

: JavaScriptで全角半角を判別の上で文字数カウントを行う

やりたかった事は「全角5文字・半角10文字以内の入力フォーム」みたいなもの。 ...

: GoogleMapでマーカーをまとめる

GoogleMapAPIでマーカーを複数表示し、近隣のエリアごとにまとめて表示さ ...

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