Home » Program » Dynamic To Top Plugin for WordPress (Tag: )

Web ページを見ていてページの下にたどり着いた時、そのページの上部に移動するナビゲーションをよく見ます。

  • <a href="#top">このページのトップへ</a> をページ下部に埋め込み
  • <a href="http://www.drive.ne.jp/" id="top" name="top"> をページ上部に記述

上記の様なスタイルが一般的で、もうひと工夫する場合は jQuery を用いつつ

$(document).ready(function(){
    $('a[href*=#]').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

            if ($target.length) {
                var targetOffset = $target.offset().top;
                var boxModel = $.support.boxModel ? navigator.appName.match(/Opera/) ? "html" : "html,body" : "body";
                $(boxModel).animate({scrollTop: targetOffset}, 400);
                return false;
            }
        }
    });
});

この様な JavaScript を追加することで、ページ上部への移動がするするとアニメーション化します。

WordPress でも同様のことが出来ないかと考えましたが、上記の動作を補って余りあるプラグイン Dynamic To Top Plugin for WordPress を見つけました。

今日現在このサイトでも有効化しています。このラインを読んでいる時点で右下に表示しているでしょう。このプラグインの優れているところは、

  • ページを 1 スクロール程度するとページ右下にページ上部へのリンクボックスが出現
  • 上部に戻れば消失
  • 出現している時にクリックすれば、アニメーション効果でするするとページ上部へ移動
  • リンクボックスや効果は管理画面から簡単にカスタマイズ可能

でしょうか。英語ですがホームページには動画説明もされているので、導入も難しくはないでしょう。

Drive Network のホームページでは WordPress を利用していませんが、次のリニューアルにはこのプラグインを参考にして同等の動作を実現しようと考えています。

Random Select

VGP-WAR100 (6)
VAIO Fit 13A + Logicool Ultrathin Touch Mouse T630 (Part 2) で bluetooth マウスに切り替えるよりも前に、ワイヤレスルータ VGP-
濃厚特製つけ麺 + 大盛り (1)
めん徳二代目つじ田 (濃厚豚崩しつけ麺) から1 ヶ月程空いて、前回気になっていた "濃厚特製つけ麺" を試しました。今回は、店内一番奥の席に案内され、お店の提案する食べ方と黒七味
一番搾り FROZEN GARDEN
一番搾り フローズン <生> の続きです。8/13 – 8/17 はお盆期間ということで、12:00 – 22:00 での営業時間とのこと。8/14 はお盆期間だか
こなゆきコラーゲン (3)
タマチャンショップ で一番お世話になっている こなゆきコラーゲン は、飲み始めてからすでに 2 年が経ちました。コラーゲンを常用する様になったきっかけは、ここ数年通っているリフレクソロジーで配っていた
日本最西端の碑
与那国島 (No. 4 – 久部良港) の続きです。西崎灯台に向かう道も当然の様に坂道です。途中まで自転車を押し上げて移動しましたが、小さな駐車場があり、そこからは遊歩道を歩いて登ります。
一度は食べていただきたい燻製チーズ (3)
自宅でお酒を飲む時のおつまみにチーズは良く食べますし、ストックしている時もあります。最寄りのスーパーやコンビニエンスストアで色々な製品を見かける中、なとりの 一度は食べていただきたい シリーズはひと味
季節の京のお昼ごはん
そろそろ次回の沖縄出張が近づいてきました。以前訪れて掲載していないお店のうち、沖縄支店から徒歩でも行ける距離に mati-cafe (マティカフェ) という、一見カフェに見えるけどランチも良い感じのお
ガーリックチャーハン + コンビーフハッシュ (1)
野菜炒め + コンビーフハッシュ に続いて、銀座わしたショップ 2014/07/03 (コンビーフハッシュ) で入手したコンビーフハッシュで何を作ろうか迷っていました。ちゃんぽんも考えて粉末の出汁まで
エビ + 野菜カレー (ルー大盛り, 辛さ 60 倍)
カリーライス専門店 エチオピア 本店 (No. 5 – 辛さ 45 – 50 倍) の続きです。前回は辛さ 50 倍で久しぶりに壁を感じましたが、それでもまだ先に進んでみます。
Valid HTML5 Valid CSS3 Another HTML Lint