CSS編集はしません
HTMLに記述を追加するだけでTOPへ戻るボタンの設置が出来ます
ファンブログのHTML編集では設置が可能でしたが
他のブログに設置できるかは不明です
HTML編集の一番下までスクロールして下さい
<div id="footer">
<% content_footer -%>
</div>
○○○○○ ←に記述を追加
<!-- /container -->
</body>
</html>
下記の記述をすべてコピペして追加して下さい
<!DOCTYPE html>
<html lang='ja'>
<head>
<title>TOPに戻る</title>
<meta charset='utf-8'>
<style>
#totop {
position: fixed; /* 位置を固定 */
right: 20px; /* 画面の右端からの数値 */
bottom: 20px; /* 画面の下からの数値
}
#totop .button {
/* 「TOPに戻る」ボタンのデザイン */
padding: 0 15px; /* 内側の余白 */
font-size: 15px;
display: inline-block;
border-radius: 1em; /* 角を丸めます */
background-color: #eee; /* ボタンの色 */
</style>
</head>
<body>
<div id='totop'><a href='#'style="text-decoration: none"><span style="font-size:large;">TOP</span></a></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
$('#totop').hide();
$(window).scroll(function() {
if($(this).scrollTop() > 600) { /* ボタン出現の数値 */
$('#totop').fadeIn();
} else {
$('#totop').fadeOut();
}
});
$('#totop').click(function() {
$('body').animate({
scrollTop: 0
}, 500); /* トップへ戻る速度の数値*/
return false;
});
});
</script>
コピペが終わったら、レビューで
右下角に表示されているのを確認してから保存して下さい
※HTMLをいじる前に必ず、どこかにコピー保存してから行ってください
コードのわかる範囲での説明になります
数値やカラーは変更可能です
表示される位置
<style>
#totop {
position: fixed;
right: 20px; 右端からの数値（rightをleftをにすると左端に出現します）
bottom: 20px; ページ下部からの数値
リンク下線を消して文字を大きく
<div id='totop'><a href='#'style="text-decoration: none"><span style="font-size:large;">TOP</span></a></div>
＃にURLを入れる事が出来るので文字下の下線を消してTOP文字を大きくしています
TOP → お好きな言葉に変更して下さい
下線付き、文字も普通でOKなら ↓を
<div id='totop'><a href='#'style="text-decoration: none"><span style="font-size:large;">TOP</span></a></div>
↓ ↓
<div id='totop'><a href='#'>TOP</a></div>
こちらに変更して下さい
ページ上からのスクロール数値
if($(this).scrollTop() > 600) {
画面をスクロールした時にTOPが出現する数値です
600に設定していますが、サイドに邪魔にならないように
お好きなように変更可能です
数字を大きくすれば、何度も何度もスクロールしなければ
出現しませんので基本的に長い文章を書く方は
数値は大きい方がといいと思います
ページトップへ戻る速度
scrollTop: 0
}, 500);
return false;
TOPをクリックした時にページトップまで戻る速度の数値です
100(速い) ⇔ 700(遅い)
面倒なCSS編集をしなくても設置できました
TOPボタン設置のご紹介でした