「ページトップへ戻る」ボタンを実装するjQueryプラグイン「scrollUp」を導入した
お気づきの人もいるかもしれないが、gori.meはページトップに戻るボタンを導入した!
実は過去に一度実装したものの、あまり必要性を感じない上に邪魔で仕方がなかったので1週間ほどで外している。僕自身未だに必要性を感じていないが、その思いは僕だけなのか実際に必要とされている機能なのかを検証するために久しぶりに導入することにした。
使用したのは「scrollUp」というjQueryプラグイン。導入も簡単で手軽にオシャレなページトップへ戻るボタンを実装できるので、紹介する!
JSとCSSファイルをサーバーに置いて動かす!
参考にしたのはブログ@コスモスフィアの記事。まずは公式ページの「Download」リンク先であるgithubページの「ZIP」からファイル一式をダウンロードしよう!
ファイルを解凍するといくつかフォルダに分かれていると思うが、使うのはJSファイルとCSSファイル、jQueryがサーバー上に設置されていない場合はjQueryファイルもサーバーにアップロードして設置するだけ。
具体的には以下のCSSファイルのいずれかと、
- css/themes/link.css
- css/themes/pill.css
- css/themes/tab.css
以下のjQueryファイルを、
- js/jquery.scrollUp.js
サーバーにアップロードしてHTMLソース内で指定するだけ。読み込み速度を考慮してCSSはhead内に、Javascriptはフッターの方に追記した。設置したファイルパスに基づいて「(ファイルパス)」の場所を変更するように!
<link type="text/css" rel="stylesheet" href="/(ファイルパス)/css/themes/pill.css" /> <script type="text/javascript" src="/(ファイルパス)/js/lib/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="/(ファイルパス)/js/jquery.scrollUp.min.js"></script> <script type="text/javascript"> // <![CDATA[ $(function () { $.scrollUp(); }); // ]]> </script>
ちなみに上記はもっともシンプルな記述。Javascript部分を下記のように変更すれば動作や見た目を変更できるので、確認しておくべし!
$(function () { $.scrollUp({ scrollName: 'scrollUp', // Element ID topDistance: '300', // Distance from top before showing element (px) topSpeed: 300, // Speed back to top (ms) animation: 'fade', // Fade, slide, none animationInSpeed: 200, // Animation in speed (ms) animationOutSpeed: 200, // Animation out speed (ms) scrollText: 'Scroll to top', // Text for element activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF' }); });
個人的にはニョキッとした動きが可愛くてなんだかんだで気に入っているが、余計な記述を徹底的に排除したい僕として設置する意味があるかは未だに疑問である。効果は引き続き追って正しく分析できていそうであれば、記事として公開する予定。
僕の話はさておき、自サイトに「ページトップへ戻る」ボタンを実装したい人はとても簡単なので試してみるべし!
scrollUp jQuery plugin – Mark Goodyear
もっと読む

WordPress.com運営元のAutomattic、Day Oneを買収

WordPress.com運営元のAutomattic、Tumblrを買収へ

WordPressの投稿画面のフォントを変える方法(全角・半角が識別可能に)

Facebook、「Instant Articles」対応用プラグインを提供へ

「WordPress 4.4」、埋め込みカード機能を実装!デザインのカスタマイズや無効化する方法

「Simple GA Ranking」で「OAuth2」認証を設定する方法

【WordPress】記事一覧の1ページ目と2ページ目以降のデザインを変更する方法

稼働中のテーマを修正したい時、変更箇所をログインユーザーしか見せないようにする記述が超便利!

CloudFlareを利用しているサイトでShareHTMLが使えないサイトは「Rocket Loader」の設定をチェック!

月額5ドルで安心感を!WordPressブログを毎日自動的にバックアップしてくれる「VaultPress」を契約してみた!

WPtouchでYoutubeなどのiframeコードが本文に含まれる記事の表示が崩れてしまう場合の対処法

WordPressでカテゴリ一覧を取得する方法!デザインしやすい形で出力する記述

Sixcore(シックスコア)に「WordPress国外IPアクセス制限」機能が追加されていた!

サーバー容量対策!過去のリビジョンをワンクリックで削除してくれるWordPressプラグイン「Better Delete Revision」

サーバー容量圧迫を事前に回避!WordPressのリビジョン機能を停止する方法

ドメインの年齢や取得年度など、ドメイン情報を簡単に調べる方法

大手メディアも実装済み!WordPressの個別記事ページに「次の記事」「前の記事」のリンクを表示する方法

WordPressで読み込み速度1秒台を実現するために実施した5つの施策

ページの読み込み速度を劇的に改善!CloudFlareとW3 Total Cacheを組み合わせて高速化する方法
