FROM CACHE - jp_header
解決済

メインメニューへのページ内リンク設置について

yuuka_saito
Shopify Partner
6 1 1

メインメニューの中にトップページのアンカーリンクを設置したところ、上手く動作しません。

 

トップページの中に以下のidを設置し、

id="main"

id="faq"

 

メインメニューのURLをhttp://www. ◯◯/#mainのように設定すると

トップページ内での遷移がうまくいかず、他ページからの遷移はできます。

 

メインメニューのURLを/#mainのように設定すると

トップページ内での遷移はできますが、他ページからの遷移がうまくいきません。

 

トップページはPageFlyで構築しています。

基礎的なことかもしれませんが、解決方法がわかる方がいらっしゃいましたらご教示いただけませんでしょうか。

 

 

 

 

1 件の受理された解決策
yuuka_saito
Shopify Partner
6 1 1

成功

ご回答ありがとうございました。

PageFlyへ問い合わせたところ、以下のコードをPageFly内のカスタムコードに設定することで解決いたしました。

 

[data-transitions=true].unloading .transition-body {
animation: none !important;
}
[data-transitions=true] .transition-body {
opacity: 1 !important;
}

元の投稿で解決策を見る

4件の返信4

Jizo_Inagaki
Shopify Partner
965 364 686

 ページ内リンクを含んだURL指定は以下ではなく、

<a href="http://www. ◯◯/#main"></a>

以下のようにスラッシュは不要です。

<a href="http://www. ◯◯#main"></a>

同一ページ内で動作するリンクを作成して試していただければ、移動後のアドレスバーが上記のような状態になっていることが確認できると思います。

 

この書き換えで動かない場合は、お使いのアプリが出力する内容が影響している可能性があるかもしれませんので、アプリのサポートに相談されるかこのまま他の方の回答を待たれることをお勧めします。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
yuuka_saito
Shopify Partner
6 1 1

ご指南いただいたとおり変更してみましたが、動作に改善が見られませんでした。

アプリ開発会社にも相談をしてみようと思います。

ご回答ありがとうございます。

Jizo_Inagaki
Shopify Partner
965 364 686

確認いただきありがとうございます。

なお前提を勘違いしている部分があり申し訳ありません。

TOPページ内のIDがリンク先ということですね。であれば確かに記載されていました「http://www. ◯◯/#main」というindex.htmlやindex.phpのようなファイル名が省力された形になると思います。

この点失念しており申し訳ありません。

 

一応アプリを使わない通常のTOPページで試してみましたが、以下のような記述のいずれでも動作はしました。

  • example.myshopify.com/#main
  • example.myshopify.com#main

 

この点からPagefly(+その他で該当要素に関連する何か)の影響かなとは思いますが、仮に仕様上対応が難しい場合は、現状原因不明なので可能性は低そうですがJavaScritpによるスクロールが検討できるかもしれません。

その際は「javascript location.hash ページ内移動」あたりでGoogle検索などをしていだければ参考になるサンプルが見つかるかもしれません。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
yuuka_saito
Shopify Partner
6 1 1

成功

ご回答ありがとうございました。

PageFlyへ問い合わせたところ、以下のコードをPageFly内のカスタムコードに設定することで解決いたしました。

 

[data-transitions=true].unloading .transition-body {
animation: none !important;
}
[data-transitions=true] .transition-body {
opacity: 1 !important;
}