全盛の頃から、JavaScriptが苦手だったためか
jQueryも苦手です……。
同じスクリプトでもPHPの方が楽です(´・ω・`)
しかし、プラグイン入れて、なんか重たくなっちゃうより良いよね
ということで、最近はjQueryも少しずつ勉強してます。
今回は、何故かちゃんと動かなかった「トップへ戻る」ボタンの出し方をメモっておきます。
一番親切だったのは『りんろぐ』さんでした。
http://wan.207works.com/backtotop-button/
しかし、これ通りでは動かず(Themifyテーマは色々読み込んでいるから?)
私がやった方法は下記の通りです。
1)/headの前に
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
とあったので、そのまま使いました。見るとThemifyのテーマで呼んでいるヘッダー部分で
jQueryあるので、良いかも?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
"></script>
と、入れても動きました。
2)/body前に
<p id="page-top"><a href="#header">Page Topへ↑</a></p>
を入れて
3)footerのwp-footerを読み込む前に
<script>
jQuery(function() {
var topBtn = $(‘#page-top’);
topBtn.hide();
//スクロールが100に達したらボタン表示
jQuery(window).scroll(function () {
if ($(this).scrollTop() > 300) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
jQuery(‘body,html’).animate({
scrollTop: 0
}, 500);
return false;
});
})
</script>
を入れました。
jQueryに変えてますが、#でも動きました
以上、〆(-ω-´).でした