「SNSシェア」ボタンを「トップへ戻る」ボタンに合わせて表示する方法

はじめに

SNSフォローボタンは常に表示されます。

この記事では、「トップへ戻る」ボタンに合わせて、一定スクロールしたら表示・非表示を切り替える方法について説明します。

完成イメージ

本ページに完成イメージを反映させます。

実装手順

以下のコードをstyle.cssに追加します。

@media (width > 1023px) {
  .article-footer .sns-share .sns-buttons {
    opacity: 0;
    transition: 0.6s;
    visibility: hidden;
  }

  .go-to-top-visible .article-footer .sns-share .sns-buttons {
    opacity: 1;
    visibility: visible;
  }
}

さいごに

今回紹介した方法を使えば、「トップへ戻る」ボタンに合わせてSNSシェアボタンを表示・非表示することができます。