上へ

ページを下へスクロールすると､右下当たりにページトップに戻るボタンが出てくるのが当たり前になっています。
WordPressの場合､テーマにより機能として実装されていたり､プラグインもたくさんあります。プラブインの場合これだけの為に導入するのも気が引けるので手作りで実装してみよう。
ここでは､このボタンの作り方について､ページを少しスクロールすると出てきて､ボタンをクリックすると､スーッとトップへ戻りボタンは消えるような仕様で作ってみよう。それを実装するためにjQueryを使います。

[上へ]ボタン実装のコード
全てのページへ適応させるには､footer.phpへ記述します。

<!--上へ-->
<div id="page-top" class="page-top">
  <p><a id="move-page-top" class="move-page-top">上へ<i class="fa fa-hand-o-up fa-lg fa-fw"></i></a></p>
</div>
<style>
.page-top p {margin:0; padding:0; position:fixed; right:20px; bottom:0; display:none;}
.move-page-top {display:block; background:#F5DF4D; color:#00589B; text-decoration:none; text-align:center; cursor:pointer; border-radius:10px 10px 0 0; padding:.25em .5em .5em;}
.move-page-top:hover {opacity:.75;}
</style>
<script>
jQuery(document).ready(function($) {
$(window).scroll(function() {
  var a = $(window).scrollTop();
  if (a > 1000) { $(".page-top p").fadeIn("slow");
  } else { $(".page-top p").fadeOut("slow");}
});
$("#move-page-top").on("click", function(){
  $("html, body").animate({scrollTop:0}, "slow");});
});
</script>