シンプルな4つのスクロールボタン作成例

新年あけましておめでとうございます🎍
今年もよろしくおねがいします

さて、時々見かけるようになったスクロールが出来ることを示す画像。
スクロールボタンとも言います。

ヒーローイメージ（ファーストビュー）として画面いっぱいになるほど大きな画像や動画を設置しているサイトで、続きのコンテンツがあることを示したり更にコンテンツを読みすすめるのを促す目的で設置します。

多くの場合、矢印（＋○か□ボタン）＋scrollの文字だったりしますが…。

時々アニメーションがついているものもあります。
アニメーションが付いたほうが目立って気づいてもらいやすいです。
だからといって、肝心なヒーローイメージより目立ってしまっては困ります。

シンプルな作りのスクロールボタンを４つ、アニメーションGIFとCodePenであげていきます。

１．上から下に点が動いていくボタン＋矢印（マウスホイール風？）

２．細長い矢印＋文字

３．丸ボタン＆下向き矢印

４．下向き矢印

基本のコード（シンプルな下向き矢印）

一番形状が単純な4番めの矢印単体のコードのうち、ボタンの部分は以下の通りとなっています。

＜HTML＞

   <a class="scroll" href="#next-section">
     <span></span>
   </a>

※aタグにアンカーを次のコンテンツに設定し、ボタンタップ/クリックで飛びます。
飛ぶ先にid属性で名前を付ける必要があります。

上記のタグに::beforeや::after疑似要素を活用して形を作ります。

＜CSS（SCSS）＞

.scroll {
 position: absolute;
 bottom: 2em;
    //丁度よく下側に設置するのにposition+bottomプロパティを使用
 width: 3em;
 height: 3em;
    //スクロールボタンのタップorクリックを受け付けるサイズ
 span {
   width: 1em;
   height: 1em;
   position: absolute;
    //矢印がずれるためtopなどで位置調整をする
   top: 25%;
   left: 33%;
   transform: rotate(-45deg);
   border-left: 1px solid #F5F5F5;
   border-bottom: 1px solid #F5F5F5;
   z-index: 2;
   animation: popping-arrow 2s infinite ease-out;
    //アニメーションさせる場合の設定
    //@keyframesで設定したアニメーション名、秒数、infinite→無限繰り返し
 }
}

※スクロールボタンの親要素ブロックにposition: relativeを設定しておく必要があります。

スクロールボタンは下向きの矢印かマウスのホイールスクロールボタンに似たものがよく使われます。

形状によって、borderプロパティなどを::before擬似要素などを併用して作ります。

丸いボタンと文字

丸いボタンは、高さと幅を等しくしてaタグ自体にborder-radius50％以上を指定すればOKです。

width: 3em;
height: 3em;
border: 1px solid #F5F5F5;
    //枠線か背景色のいずれか
border-radius: 50%;

文字を入れる方法は複数あって、::before/::after疑似要素のcontentプロパティ、aタグやspanの中に入れることで実装可能です。

【例1】
.scroll::before {
    content: 'scroll';
}

【例2】
<a href="#">
    <span>scroll</span>
</a>

縦に長い矢印

縦に伸びる長い矢印は以下の通りです。

＜HTML＞

<a class="scroll" href="#next-section">
    <span>scroll</span>
    <div class="arrow"></div>
</a>

＜CSS（SCSS）＞

.arrow {
 position: absolute;
 top: 1.25em;
 left: 1em;
 animation: 1s arrow-animation infinite;
    //今回は矢印の長さがアニメーション対象なので、設定対象はこのブロック。
 width: 0;
 height: 5em;
 border: .5px solid #F5F5F5;
    //実質↑の線幅×2が線部分の幅
 &::after {
    //矢印の先端
   content: '';
   display: block;
   position: absolute;
   top: 100%;
   left: -1px;
   top: 100%;
   left: -2px;
    //↑の部分で先端と線の位置調整。先端と線の幅は奇数にすると綺麗に調整可能。
   width: 1px;
   height: 10px;
   border-top: 10px solid #F5F5F5;
   border-left: 2px solid transparent;
   border-right: 2px solid transparent;
 }
}

// 矢印が伸びるアニメーション
@keyframes arrow-animation {
 0% {
   height: 1em;
 }
 66% {
   height: 5em;
 }
}

波紋状に広がるエフェクト

スクロールボタン（aタグ）に::before疑似要素でbox-shadowプロパティを設定し、それをアニメーションで変化させます。

//スクロールボタン（aタグ）
.scroll {
 position: absolute;
 bottom: 2em;
 width: 3em;
 height: 3em;
 border: 1px solid #F5F5F5;
 border-radius: 50%;
 cursor: pointer;
 &:hover::before {
   background: rgba(255, 230, 64, .2);
   animation-play-state: paused;
  }

//波紋エフェクトの部分
 &::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 3em;
   height: 3em;
    //topとleftを0にし、大きさとボタンと揃えると波紋の位置がずれない
   box-shadow: 0 0 0 0 rgba(255, 230, 64, .2);
   border-radius: 50%;
   opacity: 0;
   animation: ripple1 3s infinite;
 }

//矢印の部分
 span {
   width: 1em;
   height: 1em;
   position: absolute;
   top: 25%;
   left: 33%;
   transform: rotate(-45deg);
   border-left: 1px solid #F5F5F5;
   border-bottom: 1px solid #F5F5F5;
   z-index: 2;
 }
}

アニメーションの部分

@keyframes ripple1 {
 0% {
   opacity: 0;
 }
 30% {
   opacity: 1;
 }
 60% {
   box-shadow: 0 0 0 2em rgba(255, 230, 64, .2);
   opacity: 0;
 }
 100% {
   opacity: 0;
 }
}

以上のコードを元にアレンジを加えていけば、デザインに合ったボタンを作れます。

【注意点】

当たり前ではありますが、奇をてらいすぎて訳のわからないものを設置するのは避けましょう。

作った本人にも訳がわかりません。
せめてscroll downなどの文字があれば何なのか分かる可能性は出てきますが、傍目からは落ち葉のようなものが荒ぶっているようにしか見えません。

【おまけ】

Webサイトを見る人の視線は、左から右、上から下、更に左から右と「アルファベットのF」型に動く事が多いため、最初に表示されているものを見終わった時点で視線がある中央下部か右下に置くのがよいでしょう。

なので、ほとんどのボタンは中央下部か右下のいずれかにあることが多いです。

ちなみに、ヒーローイメージの幅を画面いっぱいにしないで次のコンテンツがチラ見えするようにするのも、スクロールを促す方法の一つです。
この場合、ユーザーが必要としているもの・関心を持つものだと分かるように見せます。

【参考URL】

CSSで実装する次のコンテンツへと促すスクロールダウンボタン 10
https://www.nxworld.net/tips/css-scroll-down-button.html
（備考）記事の日付が2015年と古いけど、基本的な部分は理解できますし、ここからバリエーションを作ることもできます。

animation（CSSアニメーションの概要）
https://developer.mozilla.org/en-US/docs/Web/CSS/animation
https://developer.mozilla.org/ja/docs/Web/CSS/animation