WEB制作時によく使う機能の備忘録として
ページをスクロールさせると、
「PAGETOP」のリンクがスルッと現れるスクリプト。
【head】
|
1 2 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src="js/page-top.js"> |
【HTML】
|
1 |
<p id="page-top"><a href="#header">PAGE TOP</a></p><!-- page-top --> |
【CSS】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration: none; color: #fff; width: 100px; padding: 30px 0; text-align: center; display: block; border-radius: 5px; } #page-top a:hover { text-decoration: none; background: #999; } |
【javascript】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$(function() { var showFlag = false; var topBtn = $('#page-top'); topBtn.css('bottom', '-100px'); var showFlag = false; //スクロールが100に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 100) { if (showFlag == false) { showFlag = true; topBtn.stop().animate({'bottom' : '20px'}, 200); } } else { if (showFlag) { showFlag = false; topBtn.stop().animate({'bottom' : '-100px'}, 200); } } }); //スクロールしてトップ topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); |
4,11,16行目はサイトによって適正値へ書き換えること
以上。
参考ページ：http://www.webopixel.net/javascript/538.html
コメントを残す