「トップに戻る」ボタンを実装するチュートリアル

はじめに 恐らくは最もメジャーで一般的なカスタマイズで、「scroll-behavior: smooth;」なんて便利なCSSもあるので今さら感もありましたが、未だに「トップに戻る」ボタンを実装する為だけにjQueryを読み込んでるサイトがあったりしますので、改めて紹介することにしました。 フッターセクションとして、カスタマイザーで制御できるShopifyならではの「トップに戻る」ボタン実装方法です。 セクションファイルを作成 「新しいセクションを追加する」より「gotop.liquid」を作成し、以下のコードを順番に貼り付けます。 Liquid {%- liquid assign gotop_image = section.settings.image assign image_width = section.settings.size assign image_ratio = gotop_image.width | times: 1.0 | divided_by: image_width assign image_height = gotop_image.height | divided_by: image_ratio | floor capture button_class if gotop_image echo 'gotop' else echo 'gotop gotop-button' endif endcapture assign show_scroll = section.settings.show_scroll assign right_space = section.settings.right_space assign bottom_space = section.settings.bottom_space assign show_point = section.settings.show_point assign animation = section.settings.animation capture show_animation case animation when 'side' echo 'translateX' when 'bottom' echo 'translateY' endcase endcapture assign svg = ' ' -%} セクション設定を各種定義しています。 デフォルトでは一番下のSVGコードが出力されるようになっており、画像をアップロードしなくてもサムネイルのようなデザインになります。別のデザインにしたい場合は画像をアップロードするか、SVGコードを書き換えてください。 後はスクロールで表示するボタンにしたい場合の、アニメーションや発火ポイントの定義の設定となっており、HTMLやCSS、JSの分岐に使用します。 CSS + Liquid {% style %} .gotop { position: fixed; right: {{ right_space | append: 'px' }}; bottom: {{ bottom_space | append: 'px' }}; width: {{ image_width | append: 'px' }}; height: {{ image_width | append: 'px' }}; background: none; border: none; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; z-index: 100; transition: .2s linear; } {%- if show_scroll %} .gotop[data-hide="true"] { opacity: 0; {% unless animation == 'fade' -%} transform: {{ show_animation }}(100%); {%- endunless %} } .gotop[data-hide="false"] { opacity: 1; {% unless animation == 'fade' -%} transform: {{ show_animation }}(0); {%- endunless %} } {% endif -%} {%- unless gotop_image %} .gotop-button { display: grid; place-content: center; background: rgba(0,0,0,.75); color: #fff; border-radius: 50%; } {%- else -%} .gotop .icon { width: 100%; height: 100%; object-fit: contain; } {% endunless -%} {% endstyle %} スタイルシシートはLiquid分岐させるために別ファイルにせず、同ファイル内に記述しており、主に と 出力用の分岐とアニメーションの分岐です。 一般的に画面右下に設置するサイトが多いので右下固定にしていますが、位置を変更したい場合は定義や分岐と併せて編集する必要があります。 デフォルトのスタイルやアニメーションなどを編集したい場合やメディアクエリを追記したい場合は、こちらを編集してください。 また、ボタンが隠れたりすることやトグルメニューなどの邪魔になる場合は、z-indexの値を編集してください。 HTML + Liquid {%- liquid if gotop_image != blank echo gotop_image | image_url: width: gotop_image.width | image_tag: width: image_width, height: image_height, class: 'icon' else echo svg endif -%} ボタンのHTMLです。 基本構造は単純で、画像アップロードした場合は画像が優先的に出力され、アップロードしなければSVGコードが出力されます。 アニメーションは「data-hide」属性で制御しており、「true/false」で切り替えており、CSSアニメーションにてスタイリングしています。 Javascript + Liquid const gotopButton = document.querySelector('.gotop'); gotopButton.addEventListener('click', function () { document.body.scrollIntoView({ behavior: 'smooth', }); }); {%- if show_scroll %} window.addEventListener('scroll', function () { if (window.scrollY > {{ show_point }}) { gotopButton.setAttribute('data-hide', false); } else { gotopButton.setAttribute('data-hide', true); } }); {% endif -%} ページ上部までスムーズに移動するクリックイベントと、スクロール発火イベントのJSです。 ページ内のスムーズスクロールに関しては、CSSの「scroll-behavior: smooth;」を使わず極力シンプルなJSで実装しています。 スクロールイベントも単純な仕組みですが、セクション設定と連動させて使い勝手を考慮しています。 Schema {% schema %} { "name": "トップに戻る", "limit": 1, "settings": [ { "type": "image_picker", "id": "image", "label": "画像" }, { "type": "range", "id": "size", "min": 40, "max": 100, "step": 5, "unit": "px", "label": "サイズ", "default": 50 }, { "type": "range", "id": "right_space", "min": 0, "max": 50, "step": 5, "unit": "px", "label": "右余白", "default": 15 }, { "type": "range", "id": "bottom_space", "min": 0, "max": 50, "step": 5, "unit": "px", "label": "下余白", "default": 15 }, { "type": "checkbox", "id": "show_scroll", "label": "スクロールで表示", "default": true }, { "type": "range", "id": "show_point", "min": 0, "max": 1000, "step": 50, "unit": "px", "label": "表示ポイント", "default": 200, "info": "指定ピクセルをスクロール後に表示されます" }, { "type": "select", "id": "animation", "label": "表示アニメーション", "options": [ { "value": "side", "label": "右から" }, { "value": "bottom", "label": "下から" }, { "value": "fade", "label": "フェード" } ], "default": "bottom" } ], "presets": [ { "name": "トップに戻る" } ], "enabled_on": { "templates": ["*"], "groups": ["footer"] } } {% endschema %}

最後にセクション設定のスキーマです。 セクション設定

画像 画像のアップローダーで、ボタン画像を反映します

サイズ

出力するボタンサイズを制御します

右余白

画面右端からの距離を設定します

下余白

画面下部からの距離を設定します

スクロールで表示 スクロールでボタンを表示させます

表示ポイント 指定ピクセルをスクロール後に表示されます

表示アニメーション 右から表示、下から表示、フェードインから選べます

※当セクションはフッターグループのみに設置できるようにしています。 テーマ編集は以上です。 設定 管理画面よりカスタマイザーを開き、フッターに「トップに戻る」セクションを追加し、各種設定をしてください。

カートにアイテムが追加されました

「トップに戻る」ボタンを実装するチュートリアル

デザインも自在に。jQueryを使わずに高機能な「トップに戻る」ボタンを実装します

2024年5月

2024年6月