天宮です。
今回は、ブログ記事が長くなった場合に便利な
ページ途中から上部へ簡単に戻るためのボタンを設置してみます。
Bloggerにページ上部へ戻るボタンを設置
javascriptを利用してスムーズに
上部へスクロールさせるようにします。
テーマを開き、まずは </html> を検索
</html>のすぐ上の行に下記を追加
<p class='pagetop'><a href='#container'><i class='fa fa-caret-square-o-up'/></a></p>
次に </body> を検索
</body>のすぐ上の行に下記を追加
<!--ページトップのコード-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script>
$(function() {
var topBtn = $('.pagetop');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 800) { <!--表示開始の調整-->
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body, html').animate({
scrollTop: 0
}, 400); <!--スクロール速度の調整-->
return false;
});
});
</script>
<!--ページトップのコード-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script>
$(function() {
var topBtn = $('.pagetop');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 800) { <!--表示開始の調整-->
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body, html').animate({
scrollTop: 0
}, 400); <!--スクロール速度の調整-->
return false;
});
});
</script>
</body>
<!--Facebookのコード 消さないでね-->
<div id='fb-root'/>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$('#MBT-google-ad').insertBefore($('a[name="more"]'));
});
</script>
<p class='pagetop'><a href='#container'><i class='fa fa-caret-square-o-up'/></a></p>
</html>
ここまでで一応ボタンの表示は出ます、
800の数字の部分を小さくすると
早めにボタンが表示して、
400の数字を小さくすると
上部へスクロールする速度がはやくなります。
CSSを追加し上部へ戻るボタンのデザインを変更
続いてCSSにボタンデザインのコードを追加しましょう。
レスポンシブより上に追加してもらえたら
どこでも良いのですが、
とりあえず .button-toggle を検索
メニューを開くボタンの行のすぐ上に下記を追加
/* TOPスクロール */
.pagetop {
display: none;
position: fixed;
bottom: 35px;
right: 18px;
}
.pagetop a {
display: block;
text-align: center;
color: #666;
font-size: 40px;
text-decoration: none;
padding: 0;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
/* TOPスクロール */
.pagetop {
display: none;
position: fixed;
bottom: 35px;
right: 18px;
}
.pagetop a {
display: block;
text-align: center;
color: #666;
font-size: 40px;
text-decoration: none;
padding: 0;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
/* メニューを開くボタン */
.button-toggle{
表示を確認してみましょう。
テスト用に投稿した記事があまりに短いと
スクロールボタンが表示される位置まで
いかない場合がありますから注意して下さい。