tarouken.com

ElementorでTOPに戻るボタンを実装【3種】

stock, iphone, business

ページ内目次

Elementorは何かと便利な機能がたくさんありますが、制作で多用する「TOPに戻るボタン」が意外と難しかったので、メモ的に記事にします。


以下の記事を参考にしました。


TOPに戻るボタンの仕様

  • 矢印のアイコンを入れる
  • 右下に固定
  • 画面上端だとボタンを非表示に、少しスクロールすると表示させる。
  • ボタンをクリックすると、上端までスムーズにスクロールする。

なお、Elementor Proを使用しています。


よく使うやり方

上記の仕様を満たすパターンが複数あるのですが、一番よく使うものをご紹介します。


主に3つの手順で進めていきます。

  • ヘッダーにアンカーとしてIDを付与
  • フッターにボタンを挿入
  • jQueryのコードを挿入


ヘッダーにアンカーとしてIDを付与

まず、画面上端にある会社ロゴなど、上端にある要素にIDを付与します。

スクリーンショット 2022 02 22 21.28.11
ロゴを編集状態にして、、、


スクリーンショット 2022 02 22 21.28.35

ここではロゴに「top-anchor」とのIDを付与しました。


フッターにボタンを挿入

次に、フッターエリアにTOPに戻るボタンを挿入します。

スクリーンショット 2022 02 22 21.31.30
フッターを編集状態にして、他のアイテムの間にボタンブロックを追加しました

さらにリンク先を入力し、外観を整えます。

スクリーンショット 2022 02 22 21.33.50

テキストを空欄にして、アイコンで矢印を指定します。

リンク先は「#」でなく、ヘッダーのアンカーである「#top-anchor」とします。

「#」だけだとスムーススクロールにならず一瞬でジャンプするため、何が起きたか分からなくなります。


続いて外観を整えます。

スクリーンショット 2022 02 22 21.32.56
丸い形のボタンにする時の例

これで丸いボタンになります。
Elementor Proはこういうのがほんと楽ですね!

なお、四角いボタンにするには、この画面で枠線の丸みとパディングを消すと元の四角に戻ります。



「高度な設定」にて、追加IDを入れます。

スクリーンショット 2022 02 22 21.34.21

ここでは、「top-return-btn」としました。

さらに、位置を固定するため、以下のように設定します。

スクリーンショット 2022 02 22 21.39.24
数値で余白を調整しています。


さらに、画面上端では戻るボタンを非表示にしておくため(スクロールしたら表示させる準備)、カスタムCSS欄にて「display: none;」と入力します。

スクリーンショット 2022 02 22 21.34.56


これでボタンの準備は完了です。

※ここではボタンを使用しましたが、「アイコン」でも代替可能です。


jQueryのコードを挿入

続いて、ボタンの表示・非表示の切り替えのjQueryコードを挿入します。

一旦、WordPress管理画面に戻ります。

管理メニューの「Elementor」の下にある「Custom Code」をクリックします。

スクリーンショット 2022 02 22 21.35.37


以下の画面で、緑の追加ボタンをクリック。

スクリーンショット 2022 02 22 21.35.51


分かりやすいタイトルをつけましょう。

Locationは「/body – End」が良いです。

スクリーンショット 2022 02 22 21.37.00

このコードでは、300pxより下にスクロールすると、400ミリ秒でボタンが表示、300px以下で非表示、という指定になっています。

<script defer>
jQuery(function($){
  $(window).on('scroll', function(){
    if ($(window).scrollTop() > 300) {
      $('#top-return-btn').fadeIn(400);
    } else {
      $('#top-return-btn').fadeOut(400);
    }
  });
});
</script>

これで「公開」ボタンを押して保存します。

確認してみましょう。


画面の上端では、TOPに戻るボタンは表示されていません。

スクリーンショット 2022 02 22 21.37.24 1


少しスクロールすると、、、

右下にボタンが表示されました!

スクリーンショット 2022 02 22 21.39.51


これで完了です!



機能しないときの別パターン

上記のやり方で機能しない場合があります。

それは、ナビバーが上部に固定されているケースです。


TOPに戻るボタンのリンク先であるロゴが、一緒に画面をスクロールしてくるからですね。



この場合の回避策としては、以下の2つがあります。

1.jQueryにコードを追加する。

2.ナビバーの上にセクションを追加し、アンカーを設置する方法

それぞれ解説していきます。

jQueryにコードを追加する。

手順としては、以下のとおりです。

・アンカーやアンカー用のID付与は全てなくす。
・TOPに戻るボタンのリンクは「#」だけにする。
・ElementorのCustom Codeにて、以下の赤字のコードを追加する。

<script defer>
jQuery(function($){
  $(window).on('scroll', function(){
    if ($(window).scrollTop() > 300) {
      $('#top-return-btn').fadeIn(400);
    } else {
      $('#top-return-btn').fadeOut(400);
    }
  });
  $('#top-return-btn').click(function () {
    $('body, html').animate({
        scrollTop: 0
    }, 400);
    return false;
  });
});
</script>


TOPに戻るボタンのリンクを「#」だけにすると、(Elementorが勝手に調整してくれていた)スムーススクロールが機能しません。

その機能を補うために赤字のコードを追加する、という方法です。


この方法は楽ですが、jQueryのコードが(わずかに)増えます。

それを避けたい場合は、この下のパターンを使ってください。



ナビバーの上にセクションを追加し、アンカーを設置する方法

jQueryを増やさない方法です。


ナビバーが上部固定になって使えないなら、その上にアンカーを隠しておこう、とのやり方です。

まず、ナビバーの上にセクションを追加し、アンカーウィジェットを設置します。

スクリーンショット 2022 02 22 22.11.41
見づらいですが、「+」ボタンでセクションを追加します。


メニューアンカー(右下)をセクションに追加します。

スクリーンショット 2022 02 22 22.12.17

(右下にある錨マークのもの)


アンカーに「top-anchor」を指定します。
位置的に見づらいですが、ナビゲーターを併用しながら進めるとやりやすいです。

スクリーンショット 2022 02 22 22.13.35


これでリンク先ができるので大丈夫に思えますが、、、
セクションを追加したせいで、不自然な空白ができてしまいます。


それを消すために、作ったセクションの「高度な設定」の「レスポンシブデザイン」で全て非表示にして隠してしまいましょう。

スクリーンショット 2022 02 22 22.14.49


こうするとセクションの不自然な余白も消えます。


これで、TOPに戻るボタンの行き先をページ上部に固定できます。

(最初のパターンを試した際、ナビバーやロゴにIDを付与しているなら、削除しておきましょう)


以上です!


こちらは紹介リンク:Elementor Pro

コメントを残す

メールアドレスが公開されることはありません。

Share
わがい

わがい

プログラミング(Web制作)・ライティングに携わっています。 いくつかの会社で勤めて、2020年にフリーランスになりました。 苦手なことを避けつつ、好きなことで働けるような環境作りをめざしてコツコツやってます。 HTML/CSS/JSのほか、WordPress制作、特にElementorやSnow Monkeyといったローコードを用いた短納期での制作が得意です。 また生活・健康の水準を高めるため、米国株投資や筋トレもやってます。

最近の記事

ページ内目次