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

カーフェリー (13)
沖縄本島 (No. 2 – 本部港 Part 1) の続きです。車も人も同じ入口から入りますが、歩道 ? は入って程なくすると左側に階段があり、客席へはそこを上ります。おぉ、新幹線と飛行機
牛すき鍋膳 肉二倍盛 (1)
吉野家 (ロース豚丼 十勝仕立て) や 吉野家 (牛カルビ丼) のために通い始めてから、牛すき鍋膳 も気になり始めています。販売開始から 4 ヶ月で 1,000 万食を突破したそうで、牛丼とはまるで別
Mixed Fruit
始めるにあたって、ドローイン vs ロングプレス あたりから昼食も意図的にボリュームダウンして 2kg は落していました。が、前々から気になっていた断食ダイエットとも言われるファスティングダイエットに
Herb
Why rose ? で紹介した Herb とは意味合いが違いますが、先月社内横断プロジェクト Herb を決起しました。社内に限らず、自分の過去在籍した会社でも同様でしたし、また現在お付き合いのある
VAIO Fit 13A (5)
VAIO Fit 13A (モデル決定) の続きです。02/26 22:20 頃ソニーストアで申し込みましたが、02/28 の午前中には配送されました。2014/02/26 22:21 [ソニーストア
あぐーハンバーグセット 220g
瀬底島 (No. 3 – アンチ浜ビーチ 〜 瀬底ビーチ) の続きです。瀬底島を堪能した後は、ハンバーグとパンケーキのお店うるり に猫まっしぐらに向かいました。元々予定に組み込んでいて絶対
Havana カレー (ビーフ, ライス大盛り, ルー大盛り, 辛さ 5 倍)
前日土曜日は 沖縄出張 (No. 7 ? 毛玉) で戯れた後数人で飲み会がありました。退職したスタッフとも再会してのそれは賑やかな会でした。しこたま飲んだ次の日曜日。いつも通り起きて散歩して半身浴して
味噌らーめん
めん徳二代目つじ田 (二代目つけ麺) はつけ麺が有名ですが、味噌らーめんに特化した 味噌の章 があり、気にはなっていました。つい先日 沖縄出張 (No. 5 ? 追風丸) で美味しい味噌らーめんを食べ
あらびき牛肉メンチカツ
休日のお昼ご飯はご飯だけ自宅で炊いて、駅前のイトーヨーカドーや 東急ストア の惣菜を買って済ませるパターンもあります。真夏以外はみそ汁も作ります。セブンイレブン (おつまみセット) でご紹介した通り、
猫丸庵 メニュー (2)
沖縄本島 (No. 51 – コッコロコハウス) の続きです。約 1 年半前に沖縄入りした際、沖縄本島 (No. 1 – 猫丸庵 〜 根夢) で通り過ぎることはありましたが、今
Valid HTML5 Valid CSS3 Another HTML Lint