ワードプレス(WP)でフェード&スムーススクロールのページ先頭に戻るボタン

古くから「ページの先頭に戻るリンク」の需要はありましたが、近年設計されたサイトを見ていると、

  • 最初は非表示でスクロールしたら現れる
  • フェードインで現れフェードアウトで消える
  • トップまでスムーススクロール

という仕様が鉄板になりつつあります。

この仕様、色々な意味で理にかなっています。フェードインでの登場は存在のアピールにもなり上品です。ある程度スクロールしないと見えないというのも合理的です。そしてなにより実装がjQuery数行なのでスマートです。

ワードプレスへの導入手順

totop.png

まずはボタンの画像を用意します。私はこのようなデザインにしました。サイズは自由に決めて下さい。画像はテーマフォルダ内のimagesフォルダにアップロードしました。後でcssで指定します。この画像は自由に使ってもらって構いません。

次にcssを定義します。管理画面の「テーマの編集」から「style.css」に下のコードを追加します。

#totop{
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 2000;
}    

#totop a{
    display: block;
    width: 64px;
    height: 64px;
    text-indent: -1000em;
    overflow: hidden;
    background: url(images/totop.png) 0 0 no-repeat;
}

#totop a:hover{
    background-position: 0 -64px;
}

特別な事はしていません。#totop内のtopとrightで表示位置を決めています。

最後に「footer.php」の「直前」に下のコードを追加します。 内容はHTMLとJavaScriptです。

<div id="totop"><a href="#header">ページの先頭へ戻る</a></div>
<script>
jQuery(function() {
    var totop = jQuery('#totop');    
    totop.hide();
    jQuery(window).scroll(function () {
        //スタートスクロール量 1000
        if (jQuery(this).scrollTop() > 1000) totop.fadeIn(); else totop.fadeOut();
    });
    totop.click(function () {
        //スクロール速度 500
        jQuery('body,html').animate({scrollTop: 0}, 500); return false;
    });
});
</script>
jQueryはワードプレス標準でロードされています。jQueryの$を使っていないのはコンフリクトを回避する為です。サンプルでは、表示が始まるスクロール量が先頭から1000px、先頭までスムーススクロールする時間が500msです。自由に設定してください。

以上で終了です。画像を用意するのと2箇所のテンプレートの追加で実装できました。今回はワードプレス向けの記事ですが、一般サイトでもjQueryさえロードされていれば同様に導入できます。

参考

【カスタマイズ】トップに戻るボタンをjQueryでニュルッと改造する : りくまろぐ

 

広告