【HTML・CSS・Javascript】300ピクセル下にスクロールしたら画面外から出てくるページトップに戻るボタンを作る
NOTE上で説明する時に簡単なコードなどを書くための練習です。
サンプルとして、300ピクセル下にスクロールしたら画面外からページトップに戻るボタンが出てくるコードを貼り付けてみます。
300ピクセル下にスクロールしたらページトップに戻るボタンが出てくる仕組み
Javascript
function scrollFunction() {
const this_y = window.pageYOffset;
if (this_y > 300) {
document.getElementById("pagetop").classList.add("js-active");
} else {
document.getElementById("pagetop").classList.remove("js-active");
}
}
/* スクロールした時にfunctionを実行する */
window.onscroll = function () {
scrollFunction();
}
window.pageYOffsetを使用して縦のスクロール量を取得します。
このスクロール量が300以上ならpagetopのidにjs-activeのクラスを付けるようにします。
HTML
<a href="#" id="pagetop" class="pagetop"></a>
HTMLはidとclass両方用意しました。
個人的にidにはCSSを入れないようにしているので、CSSはclass側で指定します。
今回はテストのため、aタグの中には何も入れていません。CSSでボタンを生成します。
SCSS
html {
scroll-behavior: smooth;
}
.pagetop {
display:flex;
justify-content: center;
align-items:center;
position:fixed;
bottom:20px;
right:20px;
width:60px;
height:60px;
z-index:9999;
border-radius:50%;
background:#333;
transform: translateY(100px);
transition: transform 0.5s;
&.js-active {
transform: translateY(0);
}
&::before {
content:"";
display:block;
width:20px;
height:20px;
margin-top:5px;
border-top:2px solid #fff;
border-right:2px solid #fff;
transform: rotate(-45deg);
}
}
CSSはSCSSで記載しています。
まずは、scroll-behavior: smooth;でページ内のアンカー移動をスムーズスクロールさせるようにします。
.pagetop内は通常のボタンを作成しています。transitionでtransformの変化をアニメーションするように設定することで、画面内に出たり入ったりする処理がアニメーションになります。
ちなみに、::beforeで上向きの矢印を作成しています。
.pagetop.js-active(pagetopとjs-activeが同時にclass指定されたとき)のCSSで画面内に表示されるようにtransformで移動させるCSSを設置します。
このようにすることにより、javascriptでclassが付いたり消えたりすることでCSSアニメーションが行われるようになります。
このような感じで、時々思い出したようによく使う物をメモしておこうと思います。
この記事が気に入ったらサポートをしてみませんか?