ワードプレスでスクロールしてトップに戻るボタンを作る

footer.phpの手前に以下のHTMLをコピペと。
秀丸で編集したらなぜか文字コードがshift-jisになってしまい、スクロールボタンが文字化けして焦りましたが気がついて良かった(^_^;)

<div id="page-top">
  <a id="move-page-top">▲</i></a>
</div>

次にCSSを追記と

/****************************************

          TOPへ戻るボタン（Go to top）

*****************************************/
#page-top{
    position:fixed;
    right:16px;
    bottom:16px;
    display: none;
}

#page-top a{
    color:#fff;
    padding:10px;
    text-decoration:none;
    display:block;
    cursor:pointer;
    text-align:center;
    background:#aaa;
    line-height:100%;
    border-radius: 5px;
    -webkit-border-radius: 5px;
     -moz-border-radius: 5px; 
}

#page-top a:hover{
    background:#8b8b8b;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    transition:all 0.3s;
}

まだ何も表示されません。
表示を非表示にしてあるので、これを表示させるには、jQueryなどで表示を動的に制御するのだそうな。

header.phpのの間

<?php wp_head(); ?>

の次に以下を直接書きましたよ。

<script type="text/javascript">
jQuery(function(){
  jQuery(window).scroll(function(){
    //最上部から現在位置までの距離を取得して、変数[now]に格納
    var now = jQuery(window).scrollTop();
    //最上部から現在位置までの距離(now)が600以上
    if(now > 600){
      //[#page-top]をゆっくりフェードインする
      jQuery('#page-top').fadeIn('slow');
      //それ以外だったらフェードアウトする
    }else{
      jQuery('#page-top').fadeOut('slow');
    }
  });
  //ボタン(id:move-page-top)のクリックイベント
  jQuery('#move-page-top').click(function(){
  //ページトップへ移動する
  jQuery('body,html').animate({
          scrollTop: 0
      }, 800);
  });
});
</script>

そうしましたらちゃんと戻るボタンが出てきました（*^_^*）
最初は外部ファイルで呼び出すのをやってみたのですが、私は出来ませんでした。
何故出ないのか。。。多分呼び出しかた間違ってたのかな~

スクロールボタン