てるてるブログ

jQuery -スクロールすると出てくるUPボタン-

Posted on | 8月 25, 2015 | 1 Comment&trackback

jsライブラリでのプラグインでは同じようなのを以前にも紹介（「jQuery -スクロールすると出てくるUPボタン-」）しましたがこちらはhead内に直接かけるし設置も簡単そうなのでメモ。

お小遣い稼ぎSite「スクロールすると「ページトップへ」ボタン出現」

head内jQueryライブラリを読み込んだ後下記をscript内に。

$(function() {
    var pageTop = $('.page-top');
    pageTop.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 600) {
            pageTop.fadeIn();
        } else {
            pageTop.fadeOut();
        }
    });
    pageTop.click(function () {
        $('body, html').animate({scrollTop:0}, 500, 'swing');
        return false;
    });
});

ページアップのボタンをhtml内に記入。

	
<a href="#" class="page-top">PAGE TOP ▲</a>

ページアップのボタンはCSSの「position: fixed;」で場所を固定。
右下辺りに固定するのが良くあるパターン。

Comments

最近の投稿

• jQuery -スクロールすると出てくるUPボタン-（2015/08/25）
• 背景画像のスライドショー「Vegas2」（2015/07/24）
• 郵便番号の自動入力　「jquery.jpostal.js」（2015/07/14）
• CSSグラデーションを簡単に！ジェネレーターなどのまとめ（2015/06/26）
• マッドマックス　怒りのデスロード（2015/06/25）

Search

カテゴリー

• お知らせ (1)
• 日常 (9)
  • 物欲の日々 (1)
  • あれこれ (7)
• ネットとかMacとか (46)
  • お勉強とか (11)
  • おもしろサイト (4)
  • りんご (2)
  • bot作成メモ (14)
  • jsライブラリ (14)
• ぬるオタ (44)
  • 映画・テレビ (31)
  • 舞台 (11)
  • SUPERNATURAL (2)
• WordPress (11)
  • プラグイン (3)
  • 改造 (6)

ARCHIVES

ARCHIVES 月を選択 2015年8月  (1) 2015年7月  (2) 2015年6月  (3) 2015年5月  (2) 2015年4月  (2) 2015年3月  (1) 2015年2月  (1) 2015年1月  (1) 2014年10月  (1) 2014年6月  (1) 2014年2月  (1) 2014年1月  (4) 2013年8月  (1) 2013年6月  (2) 2013年4月  (2) 2013年3月  (2) 2012年12月  (3) 2012年11月  (3) 2012年10月  (2) 2012年9月  (4) 2012年8月  (3) 2012年7月  (2) 2012年6月  (3) 2012年5月  (4) 2012年4月  (2) 2012年3月  (3) 2012年2月  (3) 2012年1月  (4) 2011年12月  (5) 2011年11月  (3) 2011年10月  (3) 2011年9月  (3) 2011年8月  (5) 2011年7月  (7) 2011年1月  (1) 2010年11月  (2) 2010年8月  (1) 2010年7月  (1) 2010年6月  (1) 2010年5月  (3) 2010年4月  (3) 2010年3月  (2) 2010年2月  (3) 2010年1月  (5)

最近のトラックバック

• スマホ用サイトのCSS切り替え
  • 06/20 モバイルフレンドリーにする方法まとめ -...
• jQuery -スクロールすると出てくるUPボタン-
  • 04/19 Exclusive and Populu...
• 捜査官Ｘ
  • 11/09 Subterranean サブタレイニア...
• ナショナル・シアター・ライヴ 『フランケンシュタイン』
  • 09/28 笑う社会人の生活
• jQuery - ヌルヌルッとページ内スクロール
  • 07/25 (K)シングルページ作成時のナビゲーショ...

最近のコメント

• 背景画像のスライドショー「jQuery maxImage plugin」
  • 08/13 95Kelley
• 王朝の陰謀
  • 02/24 i7crkm11
• jsのアコーディオン「Animated JavaScript Accordion V2」
  • 02/15 Dannyamoma
  • 01/11 Tyronevap
• WordPress - ウィルス感染？
  • 05/14 agario hack bot down...