ファンブログ　HTML編集だけで＜TOPへ戻る＞ボタンの設置

CSS編集はしません
HTMLに記述を追加するだけでTOPへ戻るボタンの設置が出来ます

ファンブログのHTML編集では設置が可能でしたが
他のブログに設置できるかは不明です

HTML編集の一番下までスクロールして下さい

<div id="footer">
<% content_footer -%>
</div>
○○○○○　　　←に記述を追加　　　　　　

</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をいじる前に必ず、どこかにコピー保存してから行ってください

コードのわかる範囲での説明になります
数値やカラーは変更可能です
表示される位置

リンク下線を消して文字を大きく

＃に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ボタン設置のご紹介でした

ブログ運営について

ブログの使い方などのメモ

ファンブログ　HTML編集だけで＜TOPへ戻る＞ボタンの設置