こんにちは。
ゆうや（@yuyaphotograph）です！
この記事では、
- 一定量下へスクロールすると、画面右下にフワッと表示されるボタンの実装方法を知りたい
- 「TOPへ戻る」ボタンをスクロール量によって表示非表示切り替えしたい
という方のお悩みを解決します。
実際のWeb制作案件で使用しているコードの紹介となりますので安心してご使用いただければと思います。
実装のポイント
実装する上でのポイントは以下のつです。
- ボタンはfixed指定して、初期表示ではopacityを0にして見えなくしておく
- スクロール位置が任意の値以上になったときに、ボタンにisActiveクラス（opacityを1にする）を付与する
- スクロール位置が任意の値以下だった場合は、ボタンのisActiveクラスを外して見えなくする
それでは実際のコードを見ていきましょう。
HTML
「TOPへ戻る」ボタンのHTMLはいたってシンプルです。
index.html
<!-- トップへ戻るボタン -->
<a href="#" class="ScrollTop">
^
</a>aタグのhref属性の値は、#にしてください。
CSS
「TOPへ戻る」ボタンのCSSは以下の通りです。
ポイントは、
- position:fixed、right:10px、bottom:10pxでページ下部に固定表示
- 初期状態ではopacity:0で非表示
- フワッと表示非表示させるためにtransitionプロパティにall 0.65sを指定
となります。
以下コードです。
idnex.css
.ScrollTop {
position: fixed;
right: 10px;
bottom: 10px;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background: #5bc8ac;
color: #fff;
text-decoration: none;
opacity: 0;
transition: all 0.65s;
}
.ScrollTop.isActive {
opacity: 1;
transition: all 0.65s;
}スクロール量によってisActiveクラスを付け替える
スクロール位置が任意のスクロール値を超えたらisActiveクラスをボタンに付与し、その逆はisActiveクラスを外すスクリプトが以下です。
index.js
//下から表示させる要素を指定
let $pagetop = $('.ScrollTop');
$(window).on( 'scroll', function () {
//スクロール位置を取得
if ( $(this).scrollTop() < 任意の値 ) {
$pagetop.removeClass('isActive');
} else {
$pagetop.addClass('isActive');
}
});ページ内スムーススクロール
「TOPへ戻る」ボタンを押したときに、スるるっと気持ちのいいスピードでスクロールさせるためのスクリプトが以下です。
index.js
//ページ内リンクスムーススクロール
$('a[href^="#"]').on('click', function () {
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop: position}, 550, "swing");
return false;
});サンプルコード
CodePenで作ったサンプルがありますのでご覧になってください(^o^)
See the Pen
wvaJWdz by 石森裕也 (@yuyaphotograph)
on CodePen.
まとめ
今回紹介したコードを使えば簡単にスクロール量によって表示非表示を切り替えられるボタンを実装することができます。
コピペで作れちゃうのでやったことない方はぺぺっと挑戦してみてください。
ボタンコーディングサンプルコード記事まとめ【HTML・CSS・jQuery】
