むしむしむしむし。
湿度80％の部屋で過ごしているがちゃまにあですどーもこんにちは。
今日は朝から町内会の草刈りに駆り出されてきました。
2時間くらいなんですけどね。ずっとしゃがんでたから腰が痛い。
ついでに足首と股関節も。
整体とか行ったほうがいいのかなー。うーむ。
今日は昨日投げた疑問の解決編です。
元ネタ↓
【JavaScript】上部に戻るボタンを付けたい(疑問編) - がちゃまにあ日報
謎は全て(じゃないけど)解けた･･･！
昨日の時点ではこんな感じ。
<a id="page-top" href="#blog-title">ページトップへ</a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var btn = $('#page-top');
btn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
btn.fadeIn();｝
else {
btn.fadeOut();
}
});
btn.click(function () {
$('body,html').animate({scrollTop: 0}, 300);
return false;
});
});
</script>
下にスクロールしたら現れるっていうのはいいんやけど、上に戻っても消えないってのは何でなんだろう？
スクロールの位置を常時観察してるわけじゃないんだろうか。
じゃあどのタイミングでこのfunction実行されるんだろ。謎。
かなり上の方まで戻らないとボタンが消えなかったんですよねー。これが気に食わなくて。
8行目の「if ($(this).scrollTop() > ★)」の★部分を変更すればいいことはわかっていたので、色々いじってついに発見。
あ、この数字pxなのか(超基本)
いや、最初の数字が「100」だったもんだから、てっきり％なのかと…
そんなレベルです私(笑)
適当に数字を入れて調整してたんですが、記事によって高さが違うし、どうせならどのくらいの割合スクロールさせたかで判断したいよねってことで、色々付け加えました。
あと、出てくる動きが単なるフェードインなのもアレだったので変更。
「btn.click～」のところでanimateを使ってくれていたのでこの辺は割とすぐできたかな。
って言ってもここで例示されてるコードの改変だけど。０からはまだきつい。
animate(params, [duration], [easing], [callback]) - jQuery 日本語リファレンス
よーし、これで完成だべー！！とか思ってニヤニヤしつつ、自分のブログ画面をリロードしてみたんですよ。
そしたらあれ、一瞬ボタンが表示されちゃう･･･？( ﾟДﾟ; )
こんなのやだやだかっこ悪い！
ActionScriptで言う「onClipEvent(load)」*1みたいなヤツ探したんですが、結局よくわからんまま。
仕方ないので路線変更して、「最初CSSでボタンを消しておいて、隠すコードを読み込んだらCSS書き換えてしまおう！」ということに。
ゴリ押し万歳。
最終的にはこんな風になりました。
サイドバー(ＨＴＭＬ)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var btn = $('#page-top');
btn.hide();
/* #page-topのCSSを読み込んで、「visibility」を書き換える */
var c = document.getElementById('page-top');
c.style.visibility = "visible";
/* 記事の高さを変数phに読み込んで、その高さの70％になったらボタンをひょこっと表示 */
var ph=$(document).height();
$(window).scroll(function () {
if ($(this).scrollTop() > ph*0.7) {
$(btn).animate({height: "show", opacity: "show"},"easeOutQuint");
} else {
$(btn).animate({height: "hide", opacity: "hide"},"easeOutQuint");
}
});
btn.click(function () {
$('body,html').animate({scrollTop: 0}, 300);
return false;
});
});
</script>
<a id="page-top" href="#blog-title"><img src="http://f.st-hatena.com/images/fotolife/g/gachamania/20140713/201407131*****.png?1*******"></a>
CSS(関係部分抜粋)
#page-top{
z-index:222222;
position:fixed;
bottom:0px;
right:0px;
visibility:hidden;
}ということで、下まで行くとクマさんがひょこっと現れます。
一応自分とこではちゃんと動いてるんだけどどうでしょうか。
そのうちランダムでいろんな動物が出てくるとか実装しようかな。超無駄だけど(笑)
*1:ページをロードした瞬間実行するよ！的なやつです。脱出ゲーム制作には欠かせない。
