HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/8-1-9.css">body内のページの先頭に戻るリンクを表示させたい場所にHTMLを記載します。
<p id="page-top"><a href="#">Page Top</a></p>body 終了タグ直前に jQuery、jQuery Easing Plugin、動きを制御する自作のJS の3 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!--自作のJS-->
<script src="js/8-1-9.js"></script>
CSSの書き方
/*リンクの形状*/
#page-top a{
background:#942D2F;
display: block;
padding:20px;
width:100%;
color: #fff;
text-align: center;
text-transform: uppercase;
text-decoration: none;
font-size:0.8rem;
transition:all 0.3s;
}
#page-top a:hover{
background: #777;
}
JSの書き方
// #page-topをクリックした際の設定
$('#page-top').click(function () {
$('body,html').animate({
scrollTop: 0//ページトップまでスクロール
}, 1500,"easeInOutQuint");//ページトップスクロールの速さ※数字が大きいほど遅くなる, easingプラグインでアニメーション速度に変化
//linear、swing、jswing、easeInQuad、easeOutQuad、easeInOutQuad、easeInCubic、easeOutCubic、easeInOutCubic、easeInQuart、easeOutQuart、easeInOutQuart、easeInQuint、easeOutQuint、easeInOutQuint、easeInSine、easeOutSine、easeInOutSine、easeInExpo、easeOutExpo、easeInOutExpo、easeInCirc、easeOutCirc、easeInOutCirc、easeInElastic、easeOutElastic、easeInOutElastic、easeInBack、easeOutBack、easeInOutBack、easeInBounce、easeOutBounce、easeInOutBounceなどから選択可能
return false;//リンク自体の無効化
});