WordPress 2014.09.17

WordPressでjQueryが動かない時の確認・注意点

このサイトでフッターあたりに、「PAGE TOP」というボタンをつけようと思ったのです。
いわゆる「ページ上部」ボタンです。で、ソースはjQueryでスクロールすると表示する系いろいろを利用させていただきました。ありがとうございます。

<p id="page-top"><a href="#wrap">PAGE TOP</a></p>

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;
}

#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;

}

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

$(function() {

var topBtn = $('#page-top');

topBtn.hide();

//スクロールが100に達したらボタン表示

$(window).scroll(function () {

if ($(this).scrollTop() > 100) {

topBtn.fadeIn();

} else {

topBtn.fadeOut();

}

});

//スクロールしてトップ

topBtn.click(function () {

$('body,html').animate({

scrollTop: 0

}, 500);

return false;

});

footer.phpにHTML書いて、style.cssにCSS追記して、javascriptを読み込ませて・・・書いてある通りやったのに、動かない！ん？なんで？
あ、そういえば・・・と思い出しました。
Javascript内に書かれている「$」が原因で動ないことがあるということ。その際は「$」をjQueryと書き直せば動くかもしれないこと。

やってみよう！とやってみたら動きました。
※1度目は「jQuery」と書かなきゃいけないのに「jqyery」と書いてしまい・・・2回目は一括置換しなかったために抜けがあり・・・3度目で成功しました。間抜け。

こちらに今回のことについて詳しく解説していただいています。

WordPressでjQueryが動かないとき真っ先に確認すべき点
これでもう忘れないハズ。