スクロールすると出てくる「トップに戻る」
トップからスクロールするとひょこっとでてくる「トップに戻る」の実装法です。
html部
<p id="rippy"><a href="#"><img src="img/rippy.png"></a></p>
css部
#rippy { position: fixed; bottom: -30px; right: 5px; z-index: 99; } #rippy img { width: 180px; float: right; } #rippy a { padding: 30px 0; display: block; } #rippy a:hover { }
js部
$(function() { var showFlag = false; var topBtn = $('#rippy'); topBtn.css('bottom', '-300px'); var showFlag = false; //スクロールが100に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 100) { if (showFlag == false) { showFlag = true; topBtn.stop().animate({'bottom' : '-15px'}, 400); } } else { if (showFlag) { showFlag = false; topBtn.stop().animate({'bottom' : '-300px'}, 400); } } }); });
これで のような状態になります。