はてなブログでスムーズ・スクロール

はてなブログでスムーズ・スクロールとページ・トップへの移動ボタンのメモ

--- header

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

--- footer

<!-- ページトップに戻る -->
<div id="page-top">
<a id="move-page-top"><i class="fas fa-arrow-alt-circle-up fa-3x"></i></a>
</div>

<script>
$(window).scroll(function(){
var now = $(window).scrollTop();
if(now > 500){
$("#page-top").fadeIn("slow");
}else{
$("#page-top").fadeOut("slow");
}
});

$("#move-page-top").click(function(){
$("html,body").animate({scrollTop:0},"slow");
return false;
});

$(function(){
$('a[href^="#"]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script>

--- css
/*上に戻るボタン関係*/#page-top {display:none;position:fixed;bottom:20px;right:10px;margin: 0;padding: 0;cursor:pointer;z-index: 10;}#move-page-top {display:block;color:rgba(0,0,0,0.4);cursor:pointer;}#move-page-top:hover {color:rgba(0,0,0,0.7);}
@media only screen and (max-width: 780px) {  body{ text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; font-size:14px;   }  th,td{font-size:12px;  }  a{display:inline-block;word-break: break-all;  }}