アンカーへのリンク＆スムーズスクロール
アンカーへのリンク＆スムーズスクロール
- このトピックには8件の返信、4人の参加者があり、最後に
により5年、 7ヶ月前に更新されました。
-
投稿
-
フロントページに何か所かアンカー(#hogeのような)を作り、ナビゲーションメニューのクリックでその個所が表示されるようなページを作ろうとしています。
ナビゲーションメニューなので、どのページからでも（同一ページ・別ページにかかわらず）有効なリンクにしないといけません。従ってURL指定は、URL+アンカーとしています。（例） frontpage/#hoge
動き自体は大体うまくいくのですが、次の2点について行き詰まっています。
１．スマートフォン(iPhoneX,PCでChromeブラウザを狭めた状態のどちらも)でフロントページを表示し、同じフロントページのアンカーが指定されたメニューをクリックしても動かない。その後モバイルメニューを自分で✖を押して閉じると先ほど選択した個所が表示されることから、メニュークリック時にモバイルメニューが閉じることなく背後で動いている模様。
２．このようにURL指定を、URL+アンカーで行った場合、同ページ別ページ関わらずスムーススクロールが全く機能しない。以上の点について、何らかの解決手段アドバイスをいただければ助かります。
なお参考までに、URLをアンカーのみ（例）#hoge にした場合は、自動的にモバイルメニューが閉じて#hogeの個所が表示され、スムーズスクロールも機能します。（ただ、別ページからだと機能しないですが）スムーズスクロールに関しては別手段もありそうですが、モバイルメニューが閉じないことはお手上げの状態です。
テーマ lightning pro
バージョン: 4.0.9
プラグイン
VK All in One Expansion Unit 9.14.0.0
選択しているデザイン
Origin (★OriginIIでも試しましたが現象は変わりません)
拡張デザインスキン
なしLightningのご利用ありがとうございます。株式会社ベクトルの石川と申します。
1. は不具合につき修正いたしました。 4.1.1 にアップデートしてご確認ください。
2. は「その箇所に直接リンクする」というものなので現状のウェブの仕様ではおそらく無理だと思われます。
もしかしたら対応策が存在するかもしれませんが、おそらくトリッキーな処理になるため、
コードの可読性や動作安定性などを踏まえて現状では実装は想定していません。以上よろしくお願いいたします。
お世話になります。テーマ及びプラグインを最新にいたしました。修正されたということですが、改善されていないように思います。 https://www.ninegates.jp/ ナビゲーションメニューの2個目がurl+アンカーとなっており、これをモバイルで選択した際の動作です。
2については別手段で考えます。どうぞよろしくお願いいたします。今弊社で確認した限りはクリックすると閉じるのですが、iPhoneのブラウザキャッシュなどが原因という事はないでしょうか？
スマホはキャッシュがキツイので、キャッシュが上手く消せない場合は別のブラウザやシークレットウィンドウなどで今一度確認してみてください。お世話になってます。いろいろありがとうございます。
PCのChromeでシークレットモード、狭幅で動かした動画です。
2番目のメニューがurl+アンカーとなっており、ここをクリックするとメニューが消えず、その後✖すると裏側で動いていたことが確認できます。
同じく、iphoneで、chrome,safariともに試してみましたが同じ結果のようです。
当方の環境の関係か、何かが不足しているのかもしれませんが、思い当たることがなくお手上げ状況です。助けていただければありがたいです。はい、そのとおりです。当初1番最初の質問に書きました通り
>どのページからでも（同一ページ・別ページにかかわらず）有効なリンクにしないといけません。従ってURL指定は、>URL+アンカーとしています。（例） frontpage/#hoge
>なお参考までに、URLをアンカーのみ（例）#hoge にした場合は、自動的にモバイルメニューが閉じて#hogeの個所が
>表示され、スムーズスクロールも機能します。（ただ、別ページからだと機能しないですが）メニューのリンクの指定で
メニューが閉じない：
h__p://www.ninegates.jp/#service
/#serviceメニューが閉じる：
#serviceという現象です。
- このトピックに返信するにはログインが必要です。
