JavaScriptだけでTOPへ戻るリンクの表示
2014/07/04
ページ内をある程度スクロールするとTOPへ戻るリンクを
表示させたかった。
ただ、複数のページに設置する必要があり、
ページによってはjQueryを使用していないところがあるので、
JavaScriptのみで行いたい。
と思って探したらよさげなソースがあったのでメモ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!--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:void(0)について
よく使う<a href="javascript:void(0)" oncl ...
-
-
formでdisplay:none;にしてても送信される
formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...
-
-
javascriptでブラウザ判別&ページ遷移
var userAgent = window.navigator.userAge ...
-
-
javascriptとPHPで正規表現を使う場合
とりあえず使いそうなのは検索と置換。 ■javascript var str = ...
-
-
PHPの配列をファイルに保存してPHPやJSで呼び出す
PHPの配列をファイルとして保存し、別のページからPHPやJavaScriptで ...
-
-
GoogleMapでマーカーをまとめる
GoogleMapAPIでマーカーを複数表示し、近隣のエリアごとにまとめて表示さ ...
-
-
サイトにHTMLエディタ(WYSIWYG)を導入する方法
シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...
-
-
GoogleMapAPIで現在地取得と目的地までのルート表示
GoogleMapAPIを使って現在地を取得しつつ、目的地までのルートを表示させ ...
-
-
jQueryで偶数or奇数行にclassを付与
やりたかった事は、 ・PHPは使えなくてjavascriptかjQueryを使用 ...
-
-
javascriptでゼロパティング
月日をゼロパディングしたかったけど PHPとは違い、そういった関数は無かったので ...
- PREV
- jQueryでIPから位置情報の取得
- NEXT
- プラグインを使用せず、jQueryでオートページャー