photo credit: vyxle via photopin cc
未だにコーディングとか小難しい事が苦手な凛(@rin_wan)です。
新しいToDoリストアプリを使い始めました。
ふとBlog関連でやりたいと思いつつ保留になってる事を書き出してみて、潰してみるか！と思って少しずつ着手してみました。
今回は長い間やりたかったけど放置していた「ページトップに戻る」ボタンの設置に挑戦してみましたヾ(o´∀｀o)ﾉ
いつもの素人が見よう見まねでやってみよー！のシリーズ続編ですｗ
「ページトップに戻る」ボタンとは？
他の方のBlogにお邪魔した時、下にスクロールするとすっと右下に出てくるオシャレボタン。
開いているページの上に戻りたくなった時にぽちっと押すと、つるーんっ！と戻る素敵ボタンです(*｀･ω･)ゞ
これをりんろぐ。にも設置してみました♪
設置したのはこれ！このボタンです。
スマホからだとPCテーマにしていただくと確認できますｖ(*´∀｀*)ｖ
ちなみにPCテーマとスマホテーマの切り替えはページの一番下で出来ますよ！
PCテーマからモバイルテーマの切り替えがこの画面。
モバイルテーマからPCテーマに切り替えるのはこの画面。
設置までの道のり
まー今回は難しかった！！！！
キーになるのはjQueryという呪文。
この子が簡単で便利らしいのですが素人には恐怖｡･ﾟ･(ﾉ∀｀)･ﾟ･｡
まずは参考にさせていただいたのはりくまさんの記事。
jQueryの呪文を使うと何やらニュルッとページトップへ戻れるようです。
何度も読み直すとどうやら呪文は3部構成の模様。
1.jQueryの呪文
2.CSSの呪文
3.HTMLの呪文
ここまでは分かったものの、jQueryの呪文は別途準備がいる模様。
うーん。
次にお世話になったのはこちらの記事。
何やらjQueryの呪文を使うには「jQueryの呪文発動！！」宣言がいる模様。
とりあえずheadタグの中にこの宣言を書いてみる。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
"></script>
そして記事にあった呪文を全部書いてみるも動かない(´･ω･｀)
疲れた。
別のサイトも探してみようって事で出会ったのがこちらの記事。
こちらはりくまさんと同じ部品で出来てるっぽい。(｡･Д･)ﾌﾑ
でもやっぱり何をどこに書くのがイマイチ分からない…。
と、ここで出会ったのがこちらの記事。
やっと分かりましたヾ(*´∀｀*)ﾉ
ここまで来て、もう一度りくまさんの記事に戻ると詳しく解説してあって分かりやすい！
私はスクロールの数値が100だと短かったので300ぐらいにしてみることにしました。
設置方法
これまでの記事を踏まえると…とりあえず設置するにはこれでイケます！
1.jQueryの呪文 → headタグ内に宣言＆スクリプトを書けばOK！
2.CSSの呪文 → ページトップへ戻る用を作る必要あり！
3.HTMLの呪文 → Body最後にちょろっと書けばOK！
皆様の記事を参考に書いたコードはこちら。
jQueryのコード
ベテランさんになると別コードに書いて呼び出すとかあるらしいのですが、今回はここまでが限界でしたｗ
このコードをheadと/headの間に貼り付ける。
私のテーマだとheader.phpでした。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
"></script>
<script>
$(function() {
var topBtn = $(‘#page-top’);
topBtn.hide();
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$(‘body,html’).animate({
scrollTop: 0
}, 500);
return false;
});
})
</script>
CSSのコード
一番上の箱は分かりやすくする為なので別に無くてもOKです。
これを反映させたいテーマのCSSファイルに貼り付ける。
/**
|————————
| =page-top
|————————
*/
#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;
}
HTMLのコード
こちらは/bodyの前に書いてあげます。
私の場合はfooter.phpにありました。
「Page Topへ」の部分は好きな言葉に変更OKです。
<p id="page-top"><a href="#wrap">Page Topへ</a></p>
まとめ
・jQueryに挑戦してみた！
・下にスクロールするとボタンちゃんと出た！！
・これで戻りやすくなったー！！
素人の私でも何とか設置できたーヾ(o´∀｀o)ﾉ
嬉しくて何度もボタン押してページトップにつるーん！と戻ってる凛(@rin_wan)ですｗ
同じような悩みを抱える方の参考になればこれ幸い♪
次の記事もお楽しみに～(*｀･ω･)ゞ
