2019/06/18
ページの記事が長くなった時に行頭に戻るボタンを追加しました。
下のようなボタンです。
CSS を追加する
『style.css』か『sub.css』に追加します。わたしは『sub.css』にしました。
追加例
下図のようにCSSの末尾に追加します。
style.css または sub.css (コピペ出来ます)
/*===戻るボタン===*/
/*ボタンの領域*/
#re-top {
position:fixed; /*画面に固定*/
bottom:10%; /*画面下へ*/
right:5%; /*画面右へ*/
z-index:10; /*レイヤー順序を上に*/
background-color:transparent; /*領域の背景色（透明）*/
}
/*丸ボタン*/
.re-topB {
position:relative;
display:block;
background-color:rgba(0,0,0,0.7); /*丸ボタンの色*/
color:rgb(255,255,255); /*三角と文字色*/
text-decoration:none;
font-weight:bold;
font-size:12px;
width:60px;
height:60px;
text-align:center;
line-height:24px;
border-radius:30px;
padding-top:30px;
box-sizing:border-box;
}
/*三角部分*/
.re-topB:before {
content:'\25B2';
position:absolute;
top:10px;
left:0;
width:100%;
text-align:center;
font-size:20px;
}
JavaScript
HTMLに直書きしていましたが、jsにまとめました。
re-top.js
re-top.js (コピペ出来ます)
jQuery(function(){
var topBtn = jQuery('#re-top');
topBtn.hide(); //最初は非表示
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 700) { //700以上、下にスクロールされた時
topBtn.fadeIn(""); //表示
} else { //それ意外は
topBtn.fadeOut(""); //非表示
}
});
});
jQuery(function(){
jQuery('a[href^=#]').click(function() {
var speed = 500;
var href= jQuery(this).attr("href");
if(href == '#content') return; //Twenty Seventeen（追加箇所）
var target = jQuery(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
『re-top.js』という名前で『js』フォルダに追加します。
HTMLに追加
『戻るボタン』を使用したい『〜〜.html』の２箇所に記述を追加します。
追加１
</head>のすぐ上に記述を追加します。
追加１ 記述
<script src="js/re-top.js"></script>追加２
<!-- フッター -->のすぐ上に記述を追加します。
追加２ 記述
<div id="re-top">
<a href="#" class="re-topB">TOP</a>
</div>