読者です 読者をやめる 読者になる 読者になる

YESかNOか半分か

元ニートが、再びニートになって何かいろいろ書いてます

YESかNOか半分か

はてなブログでスマホ表示の際に「トップへ戻るボタン」を表示させる方法。

スルスルスクロールは気持ちがいい

最近、スマホでウェブサイトを見ていると、よく現れる「トップへ戻るボタン」
押してみると、ぬるぬるというかスルスルとした動きで、見ていたページのトップまで戻るので便利ですよね。
あのヌルスル感が個人的にとても好きです。

f:id:lunasaurus:20140109011043j:plain


はてなブログってPC表示だとスター欄が下の方にあって、読み終わった時にポチッとスターを押すことが出来るんですけど、スマホ表示だと一番真っ先にタイトルとスターボタンが出現するんですよね。

たとえば、長文のエントリーを読み終わってからスターを付ける時は、親指ないし人差指でスマホ画面を猛烈にタップしなければいけなかったりするので、「トップへ戻るボタン」がスマホでも表示されると読む側の人間も楽だと思ったのですよ。

ということで、早速実装してみました。


1.まずはダッシュボード>デザイン>記事>記事下へ。

f:id:lunasaurus:20140108175845j:plain
ここのスマートフォン版にも表示する」と書いてあるボックスにはチェックを入れておいて下さい。でないと、スマホで表示されないですよー。

2.編集部分を開いて、以下のjQueryを呼び出すコードを貼りつけます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

上記のコードは
【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript | KLUTCHEさんから拝借したものです。
ここではGoogleのCDN(Contents Delivery Network)を使用しています。

この「トップへ戻るボタン」を表示させるには、jQueryというコードを読み込まなければいけないのです。
jQueryってなんだ?」と気になる方は、以下のサイトが参考になると思います。申し訳ないですが、私は全く理解できていません。


3.その下に以下のスクリプトを貼り付けます。

<script>
$(function() {
var topBtn = $('#page-top');	
topBtn.hide();
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
 if ($(this).scrollTop() > 100) {
  topBtn.fadeIn();}
    else { topBtn.fadeOut();
	}
	});
//スクロールしてトップ
    topBtn.click(function () {
	$('body,html').animate({
	scrollTop: 0}, 500);
		return false;
    });
});
</script>

コードはこちらのサイトのものを使わせて頂いています。

if ($(this).scrollTop() > 100) {

この「100」という数値が、「トップへ戻るボタン」の出現位置となっているので、数値が大きいとボタンが現れるまで暫らくスクロールしなければいけません。
お好みで調節してみてください。


4.次にCSSを貼り付けます。

<style>
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 77%;
/*フォントのサイズ*/
}
#page-top a {
/*ボタンの背景色*/
	background: #C7B370;
	text-decoration: none;
/*文字色*/
	color: #fff;
/*ボタンの幅*/
	width: 100px;
/*文字周りのスペース*/
	padding: 15px 0;
/*文字位置*/
	text-align: center;
	display: block;
/*ボタンの角丸加減*/
	border-radius: 5px;
}
#page-top a:hover {
	text-decoration: none;
/*ボタンに触れた時の背景色*/
	background: #999;
}
</style>

こちらのCSSコードも

さんから拝借しました。


5.最後にボタンの設置

以下のHTMLタグを貼りつけて完了です。

 <p id="page-top"><a href="#grobalheader-container">PAGE TOP</a></p> 

「PAGE TOP」の部分を変えることで、表示される文字を変えることができます。

はてなブログ内だと、リンク先は

<a href="#grobalheader-container">

にしておくのが無難かなと思います。


最後に動作を確認して変更を保存すれば、スマホ画面でもヌルヌルスクロールが体感できるはずです。

動作確認

それではちゃんとスマホでも見れるか確認してみましょう。
確認済み媒体:iPhone5、IE10

スクロール前

f:id:lunasaurus:20140109011146j:plain

スクロール後

f:id:lunasaurus:20140109011238j:plain

ちゃんと右下に「トップに戻るボタン」が出現しましたね。
ボタンを押すと、スルスルとページトップまで戻りました。


TIPS

f:id:lunasaurus:20140109011259j:plain
ボタンに透け感があった方が、ストレスもなくページが見やすいかなーと思ったので、参考までに。

#page-top a {/*この箇所の↓の部分*/

 background: #C7B370;

の代わりに、下記を挿入します。

background: rgba(199, 179, 112, 0.7);

RGBa値を使って色と透過具合を指定しました。「0.7」が透過の数値です。
これだと背景のみが透けて、文字は透けないのでオススメです。

上記のサイトを利用すれば、カラーコードをRGB値に楽々変換できます。


以上、コードをコピペするだけで簡単に設置できますよ。
是非ともiQueryのヌルヌル感を一緒にスマホで楽しみましょう!
※もちろん、PCでも記事ページを開いた時にヌルヌル感を味わえます。

jQuery最高の教科書

jQuery最高の教科書

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)