どうも、果汁1%程度です
はてなブログの設定シリーズ
今回は、上に戻るボタンを設置します
ブラウザの右下のほうに
こんなボタンがを設置します
ボタンをクリックすると一番上に
画面がスクロールしてくれます
やり方はこんな感じ
?
フッタにコードを貼る
ダッシュボードから
「デザイン」に移動
「カスタマイズ」に移動
「フッタ」にコードをコピペ
コピペコード
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>//上に戻るボタン
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
<div id="page_top"><a href="#"></a></div>
<script>
jQuery(function() {
var pagetop = $('#page_top');
pagetop.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) { //100pxスクロールしたら表示
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
pagetop.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500); //0.5秒かけてトップへ移動
return false;
});
});
</script>
カスタマイズ
表示までの調整
if ($(this).scrollTop() > 100) { //100pxスクロールしたら表示
100pxスクロールすると上に戻るボタン
が表示されます
100の値はスクロールした距離ですね
変更可能です
スクロール速度の調整
}, 500); //0.5秒かけてトップへ移動
500=0.5秒です
ボタンが押されると0.5秒でトップまで
スクロールされます
カスタマイズして調度良い
速度にしましょう
デザインCSSにコードを貼る
フッタの下にある
「デザインCSS」にコピペします
コピペコード
/*上に戻るボタン*/
#page_top{
width: 50px;
height: 50px;
position: fixed;
right: 20px;
bottom: 50px;
background: #888888;
opacity: 0.5;
border-radius: 50%;
}
#page_top a{
position: relative;
display: block;
width: 50px;
height: 50px;
text-decoration: none;
}
#page_top a::before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f102';
font-size: 25px;
color: #fff;
position: absolute;
width: 25px;
height: 25px;
top: -5px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}#page_top > a:hover{
background: #111111;
opacity: 1.0;
border-radius: 50%;
}
カスタマイズ
簡単に大きさと色とデザインの
カスタマイズです
大きさ
#page_top{
width: 50px; //この値を変更
height: 50px; //この値を変更
position: fixed;
right: 20px;
bottom: 50px;
background: #888888;
opacity: 0.5;
border-radius: 50%;
}
アイコンカラー
表示カラーはbackgroundの値
透過率はopacityの値
で変更します
カラーの見本をこちら等から検索してもOK
#page_top{
width: 50px;
height: 50px;
position: fixed;
right: 20px;
bottom: 50px;
background: #888888; //通常表示の色
opacity: 0.5;
border-radius: 50%;
}
#page_top > a:hover{
background: #111111; //マウスカーソルでポイントしたときの色
opacity: 1.0;
border-radius: 50%;
}
アイコンデザイン
アイコンのデザインはcontent
で変更可能です
contentに指定できる値は
こちらから検索できます
f106では
f062にすると
#page_top a::before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f102';
font-size: 25px;
color: #fff;
position: absolute;
width: 25px;
height: 25px;
top: -5px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}
以上、はてなブログに上に戻るボタン
を設置してみました
いろいろカスタマイズ可能なので
やってみるのもありですね