【Elementor】トップへ戻るボタン/アイコン(scroll to top)を簡単に追加・編集する方法

長いページなど、下の方にスクロールしたときに右下に「↑」のようなトップへ戻るボタンがあると便利です。

Elementor公式ではボタンブロックを使う設置方法を紹介してくれています。ですが、それ以上にもっと簡単な方法があります。

ここでは、トップへ戻るボタン(scroll to top)を簡単に追加する２つの方法を紹介しています。

２つの方法｜トップへ戻るボタン(scroll to top)

Elementorで簡単にトップへ戻るボタン(scroll to top)を設置する方法には次の２つがあります。

Astraを使う

デフォルトで機能が追加される

AstraはElementorと相性のいいテーマです。Astraを使うことで簡単にトップへ戻るボタン(scroll to top)を導入することができます。

Astraを使うとデフォルトでトップへ戻るボタン(scroll to top)が実装されます。

なので、ここでは背景色やサイズのカスタマイズ、あるいはトップへ戻るボタン(scroll to top)をオフにする方法紹介します。

カスタマイズする方法

管理画面で「外観 > カスタマイズ」に進みます。

「全般」をクリックします。

中段にある「トップへスクロール」をクリックします。

ここで、以下のことができます。

Essential Addonを使う

Astra以外のテーマを導入している場合は、Essential Addonというプラグインを使うことで簡単に実装することができます。

どれでもいいのでページの編集画面を開きます。

左下の歯車アイコン（設定）をクリックします。

「Scroll to Top」をクリックします。

「Enabel Scroll to Top」をYesにします。

この状態では、対象のページのみに適用されます。

ページ全体に適用したい場合は「Enable Scroll to Top Globally」をYesにします。

プルダウンで、「投稿」か「固定ページ」、あるいは両方かを選ぶことができます。

他にも、アイコンサイズ、位置、アイコンのデザイン、色などを自由に変更することができます。

設定を変更したら「更新」をクリックすることをお忘れなく。