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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

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>

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

スクロールボタン

スクロールボタン

もしお役に立てたり、クスッとして頂いたりご共感頂けた際にはポチっとして頂けますと記事への情熱になったりしなかったり。。。

  • にほんブログ村 子育てブログへ
  • にほんブログ村 IT技術ブログ WordPressへ
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*