はてなブログに「トップへ戻る」ボタンを設置してみました|スマホページ、PCページどちらにも対応してます
どうもこんばんは☆
私は自分のブログ向上の為に他のブログを見ることが多いのですが、画面右下にトップへ戻るボタンが付いているブログを良く見かけます。
↑こんなヤツです。今見ているこのページにも付いていると思います。
スクロールしても画面右下に固定で出てきて、これをクリック(スマホの場合はタップ)すると一発でページの先頭に戻れる優れもの。
とても便利なので私のブログにも設置したいと思い設置方法を検索しました。
スクリプトとかCSSとかあまり良くわからないので、色々な記事を参考にしながら試行錯誤してみた結果、理想に近いもの出来ましたよ!!
ということで、今回は私が行ったはてなブログでの「トップへ戻る」ボタンの設置方法を紹介していこうと思います。
参考にしたサイト:
jQueryでスクロールすると表示する系いろいろ | webOpixel
トップへ戻るボタン設置方法
①HTMLの記述
<p id="page-top"><a href="#wrap">PAGE TOP</a></p>
上の「PAGE TOP」は好きな文字に変更可能「ページトップへ」とかでもいいですね。
②CSSの記述
<style>
/*↓トップへ戻る用css*/
#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 77%;
}
#page-top a {
background: #666;
text-decoration: none;
color: #fff;
width: 100px;
padding: 15px 0;
text-align: center;
display: block;
border-radius: 5px;
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}
#page-top a:hover {
text-decoration: none;
background: #999;
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}
/*トップへ戻る用cssここまで*/
</style>
上はトップへ戻るボタンの表示位置、ボタンのサイズ、文字サイズ、色等の指定です。
数値とかカラーコードとかを変更してご自分の好きなようにアレンジ出来ます。
あと、私が初めて知ったコードがあったので補足しておきます。
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
上の3行はボックスの透過の指定です。数値が低くなるほど透過度が高くなります。
数字が3つあるのは色々なブラウザに対応させるためみたいです。
数値を低くしすぎると見え辛くなってしまうので注意。
③スクリプトの記述
<script type="text/javascript" src="">http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
<script type="text/javascript">
$(function() {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
最初の