読者です 読者をやめる 読者になる 読者になる

【JavaScript】ぎゃぁぁぁできた!(*゚∀゚*) ページ上部に戻るボタン(解決・設置編)

むしむしむしむし。
湿度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を使ってくれていたのでこの辺は割とすぐできたかな。
って言ってもここで例示されてるコードの改変だけど。0からはまだきつい。

animate(params, [duration], [easing], [callback]) - jQuery 日本語リファレンス


よーし、これで完成だべー!!とか思ってニヤニヤしつつ、自分のブログ画面をリロードしてみたんですよ。
そしたらあれ、一瞬ボタンが表示されちゃう・・・?( ゚Д゚; )
こんなのやだやだかっこ悪い!
ActionScriptで言う「onClipEvent(load)」*1みたいなヤツ探したんですが、結局よくわからんまま。

仕方ないので路線変更して、「最初CSSでボタンを消しておいて、隠すコードを読み込んだらCSS書き換えてしまおう!」ということに。
ゴリ押し万歳。


最終的にはこんな風になりました。

サイドバー(HTML)

<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:ページをロードした瞬間実行するよ!的なやつです。脱出ゲーム制作には欠かせない。