コードウェット

モバイルで Elementor の Scroll To Anchor の問題を修正する方法

Rifat Elementor Dec 7, 2022

昨夜遅く、ウェブサイトのコンテンツの一部を編集していました。 突然、 Elementorのアンカー機能へのスクロールがモバイルで機能しなくなりました。 アンカーまでスクロールすると Web サイトが制御されるという事実が気になりました。 すぐに専門家の助けを借りて、問題を解決しました。 この経験は、いつ問題が発生する可能性があるかを教えてくれました。 スクロールからアンカーへの問題を解決するすべての方法のリストを作成して、それを抱えているWebサイトの所有者を支援しました. いくつかの簡単なヒントを見つけるために読んでみましょう！

モバイルで Elementor の Scroll To Anchor の問題を修正する方法

Elementor の Anchor? とは

ジャンプメニューはアンカーメニューの別名です。 このアンカー ID は、設定として指定した場所に誘導します。 アンカー メニューを使用すると、閲覧者は次のページに移動し、任意のリンクをクリックし、任意の検索を行うことができます。 一般に、これは WordPress ウェブサイトの運営者です。

サイトでアンカーを使用するとどのように役立つか

アンカーは複数の目的に使用できます。 このリンクにより、Web サイトでのサーフィン体験が最適化されます。 利点は次のとおりです。

ユーザーエクスペリエンスの向上

アンカー リンクはブラウジングを容易にします。 訪問者は、取得したいサービスをクリック、タップ、選択するだけです。 これにより、オンライン体験が向上します。

素晴らしいウェブサイトを作成します

最高の無料ページビルダーElementor を使用

今すぐ始める

コンテンツの先頭に戻ることができます

スクロールしすぎている場合は、アンカー リンクがページの上部に移動するのに役立つ場合があります。 このツールは時間を節約し、順調に進みます。

効率的なブラウジングを保証

アンカーリンクは、スクロールだけでなく、クリックや前ページへの戻りなどにも利用でき、効率的な閲覧をサポートします。

より速いパフォーマンス

コマンドから即時応答を得ることができます。 指示を入力する代わりに、アンカー リンクを使用すると、より迅速なナビゲーションが可能になります。

Elementor のアンカー機能へのスクロールがモバイルで機能しない理由

Elementorのアンカーへのスクロールがモバイルで機能しない理由を説明するのは難しいです。 しかし、総合的な調査の結果、次の事実を突き止めることができました。

不十分なターゲット

ページに Sobre-Agencia、Como-Fazer、サービス、連絡先などのターゲット リンクがない場合、スクロール リンクが機能しなくなる可能性があります。

拡張子が問題を引き起こす

Android デバイスに拡張機能が搭載されている場合、これがスクロール機能の動作をブロックしている可能性もあります。

プラグインが多すぎる

Web サイトに過剰な数のプラグインがある場合、これが WordPress アンカーが応答しなくなった別の理由である可能性があります。 追加のプラグインが互いに衝突します。 これにより、Web サイトにアクセスできなくなる可能性があります。

サーバーの状態が悪い

Web サイトのサーバーがプラグインを処理できない場合、これが原因でリンクが機能しない可能性があります。

Elementor Scroll toAnchor を修正するための最も効果的なヒントの 5 つ

elementor anchor

Elementor のアンカーへのスクロールが効果的でない理由にもかかわらず、次のヒントは Web サイトの修復に役立ちます。 ここに行きます。

ターゲットの作成

ページにターゲット リンクがない場合、スクロール リンクが機能しない可能性があります。 このため、最初にターゲット リンクを作成してから、次の方法でそれらを強調する必要があります。

まず、テーマを選択し、次のコードをシートに入力します。

.menu-item a{
     Color: black;


}

リンクが視聴者に表示されるかどうかを知りたい場合は、このオプションを選択します。 これを行うには、次の CSS を提供します。

.menu-itema.mPS2id-highlight{
      color: red;
}

Javascript フィルターを使用する

Elementor アンカー ウィジェットの場合、JavaScript フィルターを使用できます。 次のプログラムを実行して、フィルターを追加します。

add_action( 'wp_footer', function() {
    if ( ! defined( 'ELEMENTOR_VERSION' ) ) {
        return;
    }
    ?>
    <script>
        jQuery( function( $ ) {
            $( window ).on( 'elementor/frontend/init', function() {
                
                elementorFrontend.hooks.addFilter( 'frontend/handlers/menu_anchor/scroll_top_distance', function( scrollTop ) {
                    var isMobile = $(window).width() <= 760;
                    
                    if (isMobile) {
                        return scrollTop - 1000;
                    } else {
                        return scrollTop;
                    }
                    
                } );
                
            } );
        } );
    </script>
    <?php
} );

スクロールを調整する

代替ソリューションとして、メニューがモバイル モードで開いている間にオフセット スクロールを調整します。

メニューが閉じないようにする

これは実行可能な解決策ではありませんが、唯一のオプションは、メニュー バーのドロップダウンを開いたままにしておくことです。 これにより、スクロール アンカーが動かなくなった場合のナビゲーションが容易になります。

デフォルトのテーマを選択

サイトのアンカー アイコンを修正するためにできることの 1 つは、アイコンを修正することです。 WordPress のデフォルトのテーマを選択します。 これは優れています。

プラグインを使用して Elementor Web サイトにアンカーを簡単に追加する方法

プラグインは、Web サイトにアンカー リンクを追加するための最も便利な方法です。 アンカーを追加するには、次の手順に従ってください。

リンクを追加する前に、リンク追加プラグインをインストールしてください。 次に、アンカー リンクが表示されるショートコード ブロックを作成します。 次のショートコードを実行します。

[ps2id id='section-1'/]

アンカー リンクを新しいショートコード ブロックに挿入します。 リンクを表示したい場所に配置します。 次のコードを実行します。

[ps2id url='#some-id']link text[/ps2id]

次に、「some-id」を構築されたアンカー名に置き換え、link-text を目的のアンカーに置き換えます。 今すぐ変更を保存します。 あなたは完了です。

5最高のアンカーとスクロールのプラグイン

接続のアクセシビリティを大幅に改善するプラグインが多数あります。 包括的な調査の結果、以下にリストされている 5 つのアンカー プラグインが最高のものとして提案されます。

アンカー リンクを追加する

これは、選択した見出しとコンテンツ要素へのアンカー リンクを挿入する信頼性の高いプラグインです。 PHP(5.6) および PHP 7 に準拠したアンカー リンクを追加します。 このパラメーターは CSS を無効にし、アンカー リンクが追加される投稿タイプを指定します。

IDにページスクロール

新しいトレンドを試すのが好きなら、これはあなたにぴったりです。 この Page Scroll to ID により、スクロール アニメーションを追加できます。 このプラグインを使用すると、投稿のビジュアル エディターにリンク & ターゲット ID ボタンを挿入できるようになり、機能が向上し、スクロール モーションの洗練されたカスタマイズが可能になります。 さらに、このプラグインは無料で使用できます。

簡単スムーズスクロールリンク

複雑さを避けるために、顧客は基本的な外観のプラグインを頻繁に探します。 その中には、シンプルでスムーズにスクロールするリンクがあります。 ユーザーは、30 以上のアニメーション効果を使用して、スクロール値、オフセット値を変更したり、特定のアンカーをスクロールから除外したりできます。 このプラグインを使用すると、任意のページ ビルダーでショートコードを利用できます。

究極のブロック

使いやすさと高度な機能のために、このプラグインをお勧めします。 18 個以上のブロックを含むアルティメット ブロックは、スクロール調整機能を提供します。 このプラグインを使用すると、目次を分離できます。 さらに、このプラグインを使用すると、アンカー接続をローマ字化できます。 ブロガーやオンライン マーケターに人気の Gutenberg プラグインです。

アンカー ブロック

この小さなプラグインはシンプルさを提供します。 初心者ユーザーは、テキストへのリンクを簡単にインストールして追加できます。 ただし、精巧なスクロール動作が欠けています。 アンカー ブロックは、Gutenberg ブログ エディター向けの最も基本的なプラグインの 1 つです。

まとめ

すべての Web サイト所有者は、完全に機能する WordPress Web サイトを望んでいます。 適切に機能しない場合、ユーザーはがっかりする可能性があります。 Elementorがモバイルでアンカーまでスクロールできないことは、すべての Web サイト所有者が遭遇する一般的な問題です。 生活を簡素化するために、最も効果的なハックを強調しました。 この情報がお客様の修理に役立つと信じています。

Divi WordPress Theme