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

ネストビール ペールエール
先日プレゼントに常陸野ネストビールを数本いただきました。製造元 木内酒造 は初めて聞いた名前ですが、調べるとビール製造は 1996 年からでも清酒では 180 年近い歴史を持つ老舗です。木彫りを思わせ
2013/01/14 11:36 品川
通常沖縄出張の際は、沖縄の Drive Network のスタッフとは普段顔を合わせることが少ないため、顔を合わせた時ならではにミーティングや意識合わせを頻繁に行います。今回の出張は当初予定していませ
黒島研究所 (2)
黒島 (No. 2 – 西表島・小浜島 〜 到着) の続きです。船を降りて外に周ると、黒島船客ターミナルと書かれていました。外に出る前にすでにレンタサイクルやお迎え等の島民が数名見えるのは
やさいそばセット
うちなぁ料理と古酒家 ニライカナイ (ニライカナイそばセット) の初挑戦から日を空けず、前回同様 13:30 頃再び訪れました。前回は壁際の席で正面に液晶テレビが見える位置でしたが、今回はその席より
国道 58 号
4, 5 年程前の沖縄出張時に 国道 58 号 は "ごーぱち" と呼ぶか "ごっぱち" と呼ぶかで本島のどこ出身かが大体分かると聞いた話をふと思い出しました。
おにぎり
飲食業界に長かったこともあり、お金を節約したい時や自分の味が食べたくなる時はお弁当を作ることがあります。以前の職場ではハンバーグすら手こねから作ったこともありました。当時はコンロが 1 つしかない環境
hamburger with fries
サービス向上を勘違いしているマクドナルド (Part 1) の続きです。完成品の未完成さここ は半分パロディも含んでいるでしょうが、パロディとは思えない写真も含まれています。すでに "質を選
八重山そば (大) + 八重山飯
沖縄本島 (No. 6 – 打ち上げ) の続きです。05:00 頃までは起きていた気がしますが、普通通り目が覚めてお昼前にはお泊り宅を後にしました。この後半分はいつものメンバーとは離れても
Herb
どんなポジションで仕事をしていても、仕事をしていくにつれておいしい仕事 (言われなくても進んでやりたい仕事)可も不可もなく淡々とこなすべき仕事やりたくない仕事 (後回しにしたいか、人に任せたい仕事)と
おろしそ餃子 並盛定食
天鴻餃子房 (海老にら餃子) から 1 ヶ月経ちました。改めて見ると、中々有名な様です。この日は、気になっていた "おろしそ餃子" を試してみることにしました。ずっと "
Valid HTML5 Valid CSS3 Another HTML Lint