てるてるブログ

てるてるぼうずの日常やらお勉強やら

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

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

jquery

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

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

DEMO →

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;」で場所を固定。
右下辺りに固定するのが良くあるパターン。

« ｜
Category: jsライブラリ
Tags: >
トラックバックURL:

Comments

One Response to “jQuery -スクロールすると出てくるUPボタン-”

トラックバック

  • Exclusive and Populus euphratica forest people Jiang Jianmin music licensing
    4月 19th, 2016 @ 12:34 PM

    samsung ssd online discount

    Large | small fi , O, as do U1 – alone as Y, fields of, d o, as, N, by a d a e for one case gure Sohu entertainment news (Xia Shenyang do male division dis o Xuan / text) Sohu entertainment exclusive, with “perfume toxic” singer and famous music prod…

Leave a Reply





キャプチャ画像
*

About

てるぼうず

てるてるぼうずな日常やらお勉強やら

旧ブログ倉庫 »
旧ブログの記事をお探しの方はこちらから

  • 人気のページ

    • TAG CLOUD

    Admin

    Subscribe to our feed

    Google Readerへ追加