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

VAIO Fit 13A (背面)
以前は stunnel 3.26 ベースの wstunnel が GUI 版として簡易に利用出来ましたが、昨今のサーバ側の標準的なバージョン OpenSSL 1.0 系との接続には向かないため、Win
FreeBSD Logo
OpenSSH 6.7p1 にアップデートする前後で躓いた点を整理します。(OpenSSL 1.0.1j との組み合わせです)makeFreeBSD 9.1-RELEASE (amd64) で試しまし
ESXi 5.1 Install (19)
VMware ESXi 5.1 Install (Part 1) の続きです。キーボードレイアウト選択root パスワード設定入力後、Enter を押すとインストール開始まで 1 – 2
FreeBSD Logo
デスクトップやノート PC の環境を FreeBSD 9.1-RELEASE (amd64) から 10.1-RELEASE (amd64) に移行した際、ついに日本語入力を kinput2 + ca
辛つけ麺 (中) + 半熟玉子
三田製麺所 (つけ麺) で開店間もない御茶ノ水店を訪れて 1 週間も空けずに再び訪れました。辛つけ麺が気になっていたからです。つけ麺さとう (辛つけ麺)つけ麺屋やすべえ (辛味つけ麺)近場にすでにある
魯肉飯 (ランチセット, 大盛り)
一茶一会 (印度チキンカレー) から日を空けずして再び訪れました。気になっていた魯肉飯 (豚の角煮) にチャレンジしてみたかったからです。前回訪れた週末の看板には、印度チキンカレーの横に "
カツカレー
"3500 円のカレー" で賑やかな世間を尻目に、庶民のカレーを食べに行きました。有名な キッチン南海 の神保町店です。小川町のオフィスそばにもありますが、本当かどうかは別にして店
丸焼きチキン (2)
久高島 (No. 6 – ふたたび) の続きです。以前から 沖縄県産やんばる若鶏の丸焼き専門店ブエノチキン浦添 を試してみたいと思いつつも機会がなく、去年予約まで入れたものの 沖縄本島 (
クリスマスツリー 2012
銀座・有楽町は最低でも 1 ヶ月に 2, 3 回は訪れるスポットです。クリスマス付近になると恒例の 「ミキモト ジャンボクリスマスツリー」点灯中です。カメラも解像度もまちまちなので統一感がありませんが
波ぬ花 (5)
17:30 にスタートした 沖縄本島 (No. 48 – ルフージュ) でエンジンがかかった後は、同じく栄町通りそばの 波ぬ花 を訪れました。2 件目で 19:00 とは私には珍しい行動パ
Valid HTML5 Valid CSS3 Another HTML Lint