💡

【Shopify オリジナル構築①】『トップ(ページ最上部)へスクロールして戻るボタン』の実装

2023/02/12に公開

Shopify

Liquid

tech

この記事では、Shopifyにてクリックでトップ(ページ最上部)にスクロールして戻るボタンの実装についてまとめます。

基礎的なコードで簡単に実装できます。

作業① ファイルを作成

sectionフォルダに新しいファイルを作成します。
ここでは、名前を「to-top-button.liquid」とします。

作業② コード編集(HTML, CSS)

作成したファイルに、CSSとHTMLのコードを記載していきます。

CSS

#toTopButton {
  position: fixed;
　bottom: 20px;
　right: 20px;
　width: 100px;
　height: 100px;
　padding: 0;
  cursor: pointer;
　background-color: pink;
　border: 1px solid #000000;
　border-radius: 50%;
　white-space: nowrap;
　box-sizing: content-box;
　z-index: 1;
　transition: all 0.3s ease;
　opacity: 0;
　visibility: hidden;
}

HTML

<button id="toTopButton" type="button">トップへ</button>

作業③ schemaの設定

schemaタグに以下のコードを記載します。

schema

{% schema %}
{
  "name": "トップに戻るボタン",
  "presets": [
    {
      "name": "トップに戻るボタン"
    }
  ]
}
{% endschema %}

作業④ JSの設定

最後にJavaScritpコードを記載して終了です。

JavaScriptコード

  const btn = document.getElementById('toTopButton');

  window.addEventListener('scroll', function () {
    if (scrollY < 500) {
      btn.style.opacity = 0;
    } else {
      btn.style.opacity = 1;
      btn.style.visibility = 'visible';
    }
  });

  btn.addEventListener('click', function () {
    window.scroll({
      top: 0,
      behavior: 'smooth',
    });
  });

動作確認

うまく動作が確認できますね！

Liquid schemaでカスタマイズ設定

Liquid schemaのsettingsで
・文字
・背景カラー
・ボタンの形
などをカスタマイズできる仕様にしましょう！

備考

カスタムCSSにて簡単にCSSが編集可能になったので、schemaで細かく設定しなくても良いかもしれませんね！

Shopifyの構築を承ります！

Shopifyで実装したいデザインなどがござましたら、お気軽にご相談、お問い合わせくださいませ！