umdesign blog

「トップへ戻るボタン」をスライドアニメーションして表示

// 7月 31st, 2012 // JavaScript

「トップへ戻るボタン」を下からにょきっとアニメーションして表示させる方法です。

参考：http://www.webopixel.net/javascript/538.html

デモ：http://www.webopixel.net/lab/sample/12/0308scrollshow/pagetop-move.html

javascript

$(function() {
var showFlug = false;
var topBtn = $('#page-top');
topBtn.css('bottom', '-100px');
var showFlug = false;
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
if (showFlug == false) {
showFlug = true;
topBtn.stop().animate({'bottom' : '20px'}, 200);
}
} else {
if (showFlug) {
showFlug = false;
topBtn.stop().animate({'bottom' : '-100px'}, 200);
}
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});