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

パーラー島風 (6)
銀座わしたショップ 2014/06/13 (コンビーフハッシュ) の続きです。銀座わしたショップ 2013/07/05 (パーラー島風 ソフトクリーム) 以来ほぼ 1 年ぶりに訪れましたが、雰囲気が少
Havana カレー (ビーフ, ライス大盛り, ルー大盛り, 辛さ 5 倍)
前日土曜日は 沖縄出張 (No. 7 ? 毛玉) で戯れた後数人で飲み会がありました。退職したスタッフとも再会してのそれは賑やかな会でした。しこたま飲んだ次の日曜日。いつも通り起きて散歩して半身浴して
VAIO Fit 13A (背面)
以前は stunnel 3.26 ベースの wstunnel が GUI 版として簡易に利用出来ましたが、昨今のサーバ側の標準的なバージョン OpenSSL 1.0 系との接続には向かないため、Win
チキンカレー (ルー大盛り, 辛さ 50 倍)
カリーライス専門店 エチオピア 本店 (No. 8 – 辛さ 20 – 40 倍) 以来辛さ 20 倍程度のカレーに落ち着いていましたが、暑い最中、久しぶりにガツーンと辛さ 5
Drive Network Philosophy
EC-CUBE 2.11 で使用する暗号化された文字列を作成するため、ソースファイルを参考にスクリプト化しました。ソースファイルを展開したディレクトリを /home/tools/appli/eccub
サバ (2)
久しぶりの My Select “日本一シリーズ” 第 5 弾です。一時期神田錦町のオフィスではなく、銀座にサテライトオフィスを設けてそちらに勤務していたことがありました。銀座
ARROWS X F-10D
ARROWS X F-10D (No. 3) の続きです。電源が入らなくなりました使い始めて 8 ヶ月程で数回腰程の高さから落としてしまったことがあります。リアカバー (裏フタ) までパカッと開いてお
Healthy Smoothies
休日 (03/31) の朝、腸まで届くビフィズス菌について調べていたところ、常識を覆す記事を見掛けました。ビフィズス菌は大腸癌ができやすい腸で殖える (キャッシュ のみ参照可能の場合あり)乳製品は人類
サントリーチューハイ -196℃ (2)
私が知る限りでは 20 年近くになりますが、毎年夏も終わりになると キリン秋味 が店頭に並び始めます。ちょうどその頃、最寄りのスーパーやコンビニエンスストアでまた見慣れない大人の飲み物を見かけました。
沖縄ちゃんぽん
すばや (ゆし豆腐そば) の時は、沖縄ちゃんぽんのつもりで訪れましたが、偶然にもお店の都合により中止していました。今回はリベンジです。入口に三線が飾ってあることに気が付きました。夜の居酒屋タイムの時は
Valid HTML5 Valid CSS3 Another HTML Lint