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

Preseved Flower
ほぼ社内向けな話ですが、入社前に希望のメールアカウント (メールアドレス @ 左側の文字列) を確認され、第 1 希望に rose と回答しました。(第 2 希望は普通に yasuhiro と回答)無
アジフライカレー
柏や (野菜炒め定食) の続きです。前日野菜炒め定食で大いに満足して帰った後に調べてみると、柏や を "陸の孤島の最強ランチ " や "貴重な定食屋" と褒める
コピリーナ (5)
前回の出張 2013/01 から今回の間に、かつてのスタッフが夢をかなえて cafe copiriina*コピリーナ をオープンしていたので、今回は是非にと訪れました。沖縄入りして 1 週間でようやく
特製つけ麺 (中盛 300g)
道の塩 (特製塩らーめん) で、期せずして 道の塩 にめぐり合った 1 週間後に 道 を訪れました。ディズニーランドのアトラクション同様の覚悟で、11:30 の開店に 10:00 に訪れると、すでに
お昼のカツカレー
マクドナルド 懐かしのメニュー (マックチャオ) の続きです。価格は単品で 650 円発売時期は 1992 年 5 月頃他にビーフカレー / チキンカレーキッチンに洗米機と炊飯器が登場もう吉野家か松屋
マグロづけ丼 (1)
いさば (サーモン西京焼) から 1 ヶ月弱開きましたが、興味があったマグロづけ丼を試すべく訪れました。今日の日替りランチはさわらの西京焼。うーん、うーん。と少し考えましたが、西京焼自体は前回サーモン
琉球泡盛 与那国 100 ml 3 本セット (3)
沖縄の友達から差し入れをいただきました。与那国島好きな私のことを知ってのプレゼント、にふぇーでーびる♪生まれて初めてのひとり旅で、初めて与那国島を訪れて早 2 年弱経ちました。今でもたまに シリーズ
らーめん 中 (ほうれん草増 + トッピング きゃべつ)
綾瀬に住んで 7 年以上になりますが、自転車で 5 分程度の距離にある 横浜らーめん武蔵家 はとなりが 松屋 ということもあって存在自体は知っていましたし、3 回程度は入ったことがありました。最後に食
タコス (2)
沖縄本島 (No. 43 – ステーキハウス四季) の続きです。到着初日のランチは、元々初体験 2 連続のハシゴランチを計画していました。2 店目は、ここも以前から気になっていたタコス専門
五目焼きそば (3)
とちぎや (肉野菜炒め定食) から日を空けずして、前回ロックオンした五目焼きそばを求めて訪れました。ピリ辛炒めに反応しそうでしたが、キクラゲに興味がないので初志貫徹出来そうです。豚の絵がキュートです。
Valid HTML5 Valid CSS3 Another HTML Lint