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

ブログ運営について

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

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

ブログのこと

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