縦に長いLPやブログ記事を読んだ後、画面の一番上までスクロールして戻るのはユーザーにとって少し手間ですよね。そんな時に画面の右下に表示される「トップへ戻るボタン」は、ユーザビリティを高める必須アイテムです。

実はElementorを使って、このボタンをたった数クリックで全ページに設置できる魔法のようなメニューが存在します。

今回は、拡張プラグインを利用した超簡単なScroll to Topの設置方法と、知っておくべき注意点を解説します。

Scroll to Top メニューの正体

Elementorの編集画面左上にあるハンバーガーメニューからサイト設定を開くと、設定の項目の中に「Scroll to Top」というメニューが表示されることがあります。

こんな便利な標準機能があったの！？と思うかもしれませんが、少しお待ちください。

よく見ると、メニューの右端にスマイルマークのアイコンがついていますよね。

これはElementorの標準機能ではなく、Elementorの機能をパワーアップさせる大人気の拡張プラグイン「HappyAddons（ハッピーアドオン）」を追加している環境でのみ表示される専用機能です。

HappyAddons 版「Scroll to Top」のメリットと設定手順

この機能の最大のメリットは、一度設定すれば、サイト内のすべてのページに自動でボタンが表示されるという点です。ページごとにボタンを配置して回る必要はありません。

⚫︎ 設定手順

編集画面左上のハンバーガーメニュー（三本線）をクリックし、サイト設定を開きます。

下にスクロールし、設定エリアにある「Scroll to Top」をクリックします。

機能をオンにします。

矢印などアイコンの形、色、サイズ、右下などの配置場所を好みのデザインに設定します。

更新ボタンを押して保存します。

たったこれだけで、全ページに美しく機能するトップへ戻るボタンが完成します！

【要注意】導入前に知っておくべきポイント

とても便利な機能ですが、以下の点には注意が必要です。

①自分のElementor画面にこのメニューがない場合
もしサイト設定を開いても「Scroll to Top」がない場合、あなたのサイトには HappyAddons プラグインがインストールされていません。
この機能だけのために新しく拡張プラグインを入れると、サイトの表示速度が重くなる原因になることもあります。

②全ページに表示させたくない場合
この機能はサイト全体に適用されます。
お問い合わせページだけはボタンを消したい、このLPにだけ独自のボタンを置きたいといった細かい条件分岐には不向きです。

まとめ：手動配置との使い分け

トップへ戻るボタンの設置は、ご自身のサイト環境に合わせて以下の2つの方法を使い分けるのがプロの制作スタイルです。

⚫︎ HappyAddonsを使っている場合：
今回紹介したサイト設定 ＞ Scroll to Top を使うのが圧倒的に早くて簡単です。迷わず活用しましょう！

⚫︎ プラグインを増やしたくない・特定のページだけ置きたい場合：
Elementorの標準機能（アイコンウィジェット＋固定配置の設定）を使って、手動でボタンを作るのがおすすめです。

ご自身の環境を確認して、最適な方法でユーザーに優しいサイトを作ってみてくださいね。