アンカーリンクが別のページから正しく送信されていませんが、同じページ内のリンクをクリックすると、見出しの下に表示されます。アンカーリンクは、メインナビゲーションの「Our Work」の下のサブメニュー項目です。アンカーリンクがページ内から機能しない
誰かがこれを引き起こしている可能性について少し明るい光を放つことができるのでしょうか、それとも代替ソリューションを提供することができますか?
WordPress 4.7.2のGenesisフレームワーク。
アンカーリンクが別のページから正しく送信されていませんが、同じページ内のリンクをクリックすると、見出しの下に表示されます。アンカーリンクは、メインナビゲーションの「Our Work」の下のサブメニュー項目です。アンカーリンクがページ内から機能しない
誰かがこれを引き起こしている可能性について少し明るい光を放つことができるのでしょうか、それとも代替ソリューションを提供することができますか?
WordPress 4.7.2のGenesisフレームワーク。
問題はglobal.jsに由来します。
コードから削除して何が起こるかを確認してください。
特定のしきい値を超えてスクロールすると(この場合、アンカーリンクがページを下に移動したとき)、スクリプトはヘッダー/ナビゲーションを縮小します。これは、ページ全体を上に移動することによってページ全体に影響を与えます。おそらくヘッダをposition:absoluteに設定するべきです。スクリプトを使ってもう少し遊ぶ必要があるかもしれません。とにかく、Googleにヘッダーを縮小するためのチュートリアルがたくさんあります。
副次的な問題:HTMLに重複したIDを使用しています.HTMLでは技術的に許可されていません。それらのIDにアクセスしようとしているスクリプトを持っていない限り、問題は決して見られません。とにかく、さまざまなブラウザがこれを別々に扱うかもしれないので、ただ修正するのが一番です。例えば
:
<a id="branding"></a><p></p>
<article class="panel" id="branding">
は次のようになります。
<a id="branding"></a><p></p>
<article class="panel">
...あなたのセクションのすべてのために、
サイドノートでは:あなたが視覚的にするために<p></p>
を使用していますただし、CSSではマージンとパディングルールを使用するだけです。
それは実際には追加のpタグがなかった超奇妙なBCです。私はこの特定のフレームワークがかなりの不必要なhtmlを追加すると思っています。はい、重複IDを呼び出すためのありがとう!これは修正されました。皆さんありがとう! – Amanda
どのブラウザですか?クロムv55を使用すると、問題を再現できません。 – Snowmonkey
だから私は突然掘り下げています。おそらくそれが前の内容と関係しているのだろうかと思っています。 FFで完全に燻蒸されたChrome v55で正常に動作し、IEを試していません。 – Snowmonkey
まず、直接のウェブサイトリンクを提供することはできません。あなたは問題に関連するサンプルコードを提供する必要がありますが、とにかくサイトをチェックしようとしましたが、この問題の原因は問題です。私は 'global.js'からこれを削除しました。問題はhttp://imgur.com/a/enwoE – Roljhon