画面をスクロールすると追従してくるボタンをCSSだけで作る方法

画面をスクロールすると画面内で位置が固定されていてスクロールに合わせて追従するようなボタンはCSSだけで作ることができます。

長い記事だと右下あたりにページトップに戻るボタンがあると読者にも優しいです。

ここではそのような追従ボタンを作る方法を解説します。

知っておくべきCSSプロパティ

まずは追従ボタンを作る時に重要なプロパティについて説明します。

positionプロパティ

これは要素の位置関係を指定するプロパティです。このプロパティには次の４つの値が取れます。

• static
  positionのデフォルト値でどんな方法でもこの値が指定されている要素は位置を変えることができない
• relative
  元々表示されるはずだった場所から相対的に位置指定できる
• fixed
  viewport(PCやスマホの表示領域)に対する相対位置で配置。つまり特定の場所に要素が固定されるので画面をスクロールしても付いてくる要素が作れる
• absolute
  fixedと似ているが位置指定可能(positionプロパティがstatic、relative、absolute)で最も近い要素に対する相対位置に配置される

ここで必要なのは画面の表示領域内に対して要素の位置を指定する「fixed」です。

次の画像のようにボタン要素にだけposition:fixedを適用するとvireportに対して一固定のボタンが作ることが可能です。

top,left,bottom,rightプロパティ

この４つのプロパティは要素を配置する位置を指定するプロパティです。

ただし要素のpositionプロパティが「relative」,「absolute」,「fixed」に指定されている場合だけ有効で、「static」が指定している場合は無効になります。

これらのプロパティは基準となる位置から上下左右にどれだけ離れているかを指定します。例えばbottomプロパティに50px、rightプロパティに30pxを指定すると下部から50px、右側から離れた位置に要素の右下がきます。

追従ボタンを作るときはこのプロパティでPCやスマホの表示領域に対して位置を指定する必要があります。

追従ボタンの作り方

ここまで紹介したプロパティを使うとスクロールに追従してくるボタンが作れるようになります。

まず次のようなボタン要素を定義します。

<button class="fixed_btn">ボタン</button>

そしてこのボタンに次のようなCSSを適用します。

.fixed_btn
{
  position: fixed;
  bottom: 10px; 
  right: 10px;
  padding: 6px 40px;
}

これだけで追従ボタンが作れます。

ブラウザでは次のようにビューポートの右下から10pxだけ離れた位置にボタンが表示されます。

See the Pen 追従ボタン by kaz1503 (@kaz1503) on CodePen.dark

応用例

この追従ボタンとスクリプトを応用するとクリックすると記事のトップに戻るボタンが作れます。コードは次の通りです。

HTMLコード

<button id="top_btn">記事トップ</button>

CSSコード

#top_btn
{
  position: fixed;
  bottom: 10px;
  right: 10px;
  
  border-radius: 6px;
  background-color: rgba(255, 100, 0, 0.8);
  padding: 6px 3px;
}

スクリプト(jQuery)

$(function(){
  $("#top_btn").on("click", function(){
    $("html, body").animate({scrollTop: 0 }, 1000, "swing");
  });
});

スクリプト内で追従ボタンがクリックされたらanimate関数でページトップに戻る処理を書いています。

$("html, body").animate({scrollTop: 0}, 1000, "swing");

上のコードの「500」はスクロールにかかるミリ秒で500を指定した場合は0.5秒かけて記事上までアニメーション付きでスクロールします。

コードと実行例は次の通りです。一番下までスクロールしてボタンを押してみると動作が分かります。

See the Pen トップに戻るボタン by kaz1503 (@kaz1503) on CodePen.dark

以上スクロールに合わせて追従してくるボタンをCSSで作る方法について解説しました。