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

らーめん 並 (きゃべつ) + トッピング (ほうれん草増) + ぎょうざ
横浜らーめん武蔵家 (きゃべつ + もやし) の続きです。写真は 12/08 の自宅近所の東綾瀬公園 (景色 (東綾瀬公園)) です。12 月に入ってもまだ銀杏の紅葉が多く見られますが、この後 4 日
チキンカレー
沖縄出張から帰った後、改めて "欧風カレー" ってどういう定義でどんな作り方が一般的なのだろう、と興味を持って調べてみたところ、何と 欧風カレー ボンディ のレシピが公開されている
ワイルドステーキ 300g (2)
銀座 4 丁目に一号店をオープンした いきなり ! ステーキ がオフィスのそばにも出店していると知って、早速訪れました。フードスタジアム — 新・外食ウォーズ — 【新・外食ウ
瀬底ビーチ (4)
瀬底島 (No. 1 – 172 号線散策) の続きです。前日程の雨ではありませんが小雨がパラつくこともあるこの日に、折角ですから瀬底ビーチをのぞいてみることにしました。悪天候のため営業は
FreeBSD Logo
PHP 4.4.9 + OpenSSL 0.9.8 系の環境を OpenSSL 1.0.1j にアップデートした際に躓いた点を整理します。configure は通りますが make で以下の様にストッ
iPhone 6 Plus (Gold)
iPhone 6 Plus (開封) の続きです。スマートフォン利用の最大の目的は、PC を持たずに障害対応の初動調査をする点です。そのため、iPhone 6 Plus (機種変更) で渡された iP
VBoxManage list hdds
自宅や出張時に使用しているノート PC (hp dv5 has broken again) はホスト OS を Windows 7, ゲスト OS に FreeBSD をインストールしています。今回
Dr. コトー診療所 (防波堤から)
与那国島 (No. 5 – 西崎) の続きです。西崎灯台のある高台から降りて、次は最大の目的地 "Dr. コトー診療所" のオープンセットがある比川に向かいます。島の外
WordPress Logo
Web ページを見ていてページの下にたどり着いた時、そのページの上部に移動するナビゲーションをよく見ます。<a href="#top">このページのトップへ</a
もも ? (4)
10/09 から開始した本来の沖縄出張で、土・日を迎えることになりました。かねてからチームの K 君の飼い猫 "もも" に会ってみたいと思っていました。沖縄にも猫カフェがいくつかあ
Valid HTML5 Valid CSS3 Another HTML Lint