jQueryでページトップアイコン表示
まず、jqueryとアイコン画像を読み込み
/*html*/ <link rel="stylesheet" href="./fontello-ba9b6ef8/css/fontello.css"> <script src="jquery-1.11.0.min.js"></script>
styleに下記を記述し
/*css*/ .pagetop { display: none; position: fixed; bottom: 30px; right: 55px; cursor:pointer; }
jsに下記を記述
/*js*/ $(function() { var pagetop = $('.pagetop'); $(window).scroll(function () { if ($(this).scrollTop() > 300) { pagetop.fadeIn(); } else { pagetop.fadeOut(); } }); pagetop.click(function () { $('body, html').animate({ scrollTop: 0 }, 'fast'); }); });
jQeryを読み込んだ後にスクリプトを記述しないと正常に動かない。また、それでも動かない場合、jQueryのバージョンを変えてみるとよい。
コメントor補足情報orご指摘あればをお願いします。
- << 前のページ
- 次のページ >>