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の三項演算子
いつもと違う書き方？ 使い方の三項演算子が あったのでメモ。 ■ソース var ...
-
-
八地方区分→都道府県→路線→駅名の連携したセレクトメニュー
八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...
-
-
JavaScriptでフォームの禁止ワード制限
掲示板等で本文を送信する際に、予め定めていた禁止ワードが含まれていないかチェック ...
-
-
テキストエリアを自動でリサイズ
改行するだけで勝手にリサイズしてくれるので、 ユーザー用でも管理用でも使えそう。 ...
-
-
GoogleMapでマーカーをまとめる
GoogleMapAPIでマーカーを複数表示し、近隣のエリアごとにまとめて表示さ ...
-
-
JavaScriptでinputタグのtypeを変更
チェックボックスの状態によって inputタグのtypeをtext⇔passwo ...
-
-
ページのリロード、ページの戻る
ブラウザのリロードと同じようなボタンを作成してほしいとの 要望があって色々あった ...
-
-
javascriptでのについて
javascriptを書く際に、 <script> <!-- ...
-
-
画像をドラッグ&ドロップでアップロード
■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...
-
-
PHPで位置情報を取得してGoogleMapAPIで使用する方法
GPSみたいな位置情報をPHPで取得し、GoogleMapAPIでその場所を反映 ...
- PREV
- jQueryでIPから位置情報の取得
- NEXT
- プラグインを使用せず、jQueryでオートページャー