Web ページを見ていてページの下にたどり着いた時、そのページの上部に移動するナビゲーションをよく見ます。
- <a href="#top">このページのトップへ</a> をページ下部に埋め込み
- <a href="http://www.drive.ne.jp/" id="top" name="top"> をページ上部に記述
上記の様なスタイルが一般的で、もうひと工夫する場合は jQuery を用いつつ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(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 を利用していませんが、次のリニューアルにはこのプラグインを参考にして同等の動作を実現しようと考えています。
