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

オリオンビール + お通し
facebook 沖縄ユーザーグループ が縁で沖縄好きな友達も増え、また改めてみんなで会おうと決めて、今度は 沖縄食彩 てぃ?だかんかん に集うことになりました。当初の予定から若干メンバーに変更があり
Lavender
緑内障 (No. 2) の続きです。点眼なしで臨んでみた前回 09/07 の時には 3 ヶ月後に来てくださいと言われていたので、先日 12/07 に訪れました。本来 1 日 1 回点眼するべき様ですが
Firefox Logo
普段作業する時は FreeBSD で環境構築したデスクトップ PC を使っています。現在は OS に FreeBSD 9.0-RELEASE (amd64) を使用しています。Web ブラウザは li
Rack Sample 0
ここ数年、"理想のファイルシステムとは何か" というテーマで考え続けています。機器単体では RAID (Redundant Arrays of Independent Disks)
Drive Network Philosophy
DKIM とは DomainKeys Identified Mail の略で 送信ドメイン認証 の技術の 1 つです。Drive Network では、dkim-milter のバージョンが 0.5
おむすび権米衛 (3)
玄米 初挑戦 後、おむすび権米衛 の玄米おにぎりを買う機会を狙っていました。行動半径内では シャポー船橋店 と ヨドバシ秋葉原店 にあることは知っていましたが、もっと近所にないかと調べたところ、我らが
スターバックス コーヒー 富山環水公園店 (1)
富山出張 (No. 3 ? 富山ブラック) の続きです。富山出張 (No. 2 ? R&D ファクトリー) の見学までまだ時間がある様でしたし、塩辛さが収まらないのでコーヒーでもと連れて行って
五目焼きそば 大盛 (2)
とちぎや (五目焼きそば) の後はついに麺類に手を出そうかと思いつつも、久しぶりの五目焼きそばがうれしかったので今度は大盛にしてみようか迷いつつ再び訪れると、今日のサービス定食 "蒸し豚の特
猫丸庵 メニュー (2)
沖縄本島 (No. 51 – コッコロコハウス) の続きです。約 1 年半前に沖縄入りした際、沖縄本島 (No. 1 – 猫丸庵 〜 根夢) で通り過ぎることはありましたが、今
サラダとドレッシング
今回の沖縄出張は 10/04 入りの 10/20 帰りでした。本筋の目的は 10/09 – 10/19 で業務しましたが、ここからは最近の定宿 ホテル ノア での寝起きになります。ここであ
Valid HTML5 Valid CSS3 Another HTML Lint