[自分用メモ脱jq] トップへ戻るボタン スムーズにスクロールしてページのトップへ戻る
脱jqをするため、トップに戻るボタンをjsにて実装しました。
その時の備忘録です。
HTMLファイルに下記を記入
<div class="dammy">
<p>Javascript ページトップへ戻るボタン</p>
</div>
<button id="page-top" class="page-top" aria-label="ページの最初に戻る"></button>
CSSファイルには下記を記載
div.dammy{
display: inline-block;
width: 100%;
height: 1500px;
background-color: lightgray;
position: relative;
}
div.dammy::before{
content:"ページの真ん中";
position: absolute;
top: 50%;
left: 0;
transform: transrate(0,-50%);
}
div.dammy::after{
content:"ページの最後";
position: absolute;
bottom: 0;
left: 0;
}
/* ボタンのスタイル */
.page-top {
/* buttonタグのリセットCSS */
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
/* ボタンの装飾 */
position: fixed;
right: 30px;
bottom: 30px;
z-index: 100;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #115582;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
/* 矢印のスタイル */
.page-top::before {
content: "";
width: 12px;
height: 12px;
margin-bottom: -6px;
border-top: solid 3px #fff;
border-right: solid 3px #fff;
transform: rotate(-45deg);
}
/* ホバー時のスタイル */
.page-top:hover {
transform: scale(1.1);
}
jsは下記を記載
const pagetopBtn = document.querySelector('#page-top'); //ボタンを定義
//ボタンをクリックしたら
pagetopBtn.addEventListener('click', () => {
//スクロールさせる
window.scrollTo({
top: 0, //停止位置をtopからのpxで指定
behavior: "smooth" //スクロールの"ふるまい"を指定
});
});
この記事が気に入ったらサポートをしてみませんか?