アンカーへのリンク&スムーズスクロール

VWSとは フォーラム Lightning アンカーへのリンク&スムーズスクロール

アンカーへのリンク&スムーズスクロール

  • このトピックには8件の返信、4人の参加者があり、最後にtammarにより4年前に更新されました。
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • 投稿者
    投稿
  • #35426

    tammar
    参加者

    フロントページに何か所かアンカー(#hogeのような)を作り、ナビゲーションメニューのクリックでその個所が表示されるようなページを作ろうとしています。

    ナビゲーションメニューなので、どのページからでも(同一ページ・別ページにかかわらず)有効なリンクにしないといけません。従ってURL指定は、URL+アンカーとしています。(例) frontpage/#hoge

    動き自体は大体うまくいくのですが、次の2点について行き詰まっています。
    1.スマートフォン(iPhoneX,PCでChromeブラウザを狭めた状態のどちらも)でフロントページを表示し、同じフロントページのアンカーが指定されたメニューをクリックしても動かない。その後モバイルメニューを自分で✖を押して閉じると先ほど選択した個所が表示されることから、メニュークリック時にモバイルメニューが閉じることなく背後で動いている模様。
    2.このようにURL指定を、URL+アンカーで行った場合、同ページ別ページ関わらずスムーススクロールが全く機能しない。

    以上の点について、何らかの解決手段アドバイスをいただければ助かります。

    なお参考までに、URLをアンカーのみ(例)#hoge にした場合は、自動的にモバイルメニューが閉じて#hogeの個所が表示され、スムーズスクロールも機能します。(ただ、別ページからだと機能しないですが)スムーズスクロールに関しては別手段もありそうですが、モバイルメニューが閉じないことはお手上げの状態です。

    テーマ lightning pro
    バージョン: 4.0.9
    プラグイン
    VK All in One Expansion Unit 9.14.0.0
    選択しているデザイン
    Origin (★OriginIIでも試しましたが現象は変わりません)
    拡張デザインスキン
    なし

    #35507

    Vektor,Inc
    キーマスター

    Lightningのご利用ありがとうございます。株式会社ベクトルの石川と申します。

    1. は不具合につき修正いたしました。 4.1.1 にアップデートしてご確認ください。

    2. は「その箇所に直接リンクする」というものなので現状のウェブの仕様ではおそらく無理だと思われます。
    もしかしたら対応策が存在するかもしれませんが、おそらくトリッキーな処理になるため、
    コードの可読性や動作安定性などを踏まえて現状では実装は想定していません。

    以上よろしくお願いいたします。

    #35519

    tammar
    参加者

    お世話になります。テーマ及びプラグインを最新にいたしました。修正されたということですが、改善されていないように思います。 https://www.ninegates.jp/ ナビゲーションメニューの2個目がurl+アンカーとなっており、これをモバイルで選択した際の動作です。
    2については別手段で考えます。どうぞよろしくお願いいたします。

    #35520

    Vektor,Inc
    キーマスター

    今弊社で確認した限りはクリックすると閉じるのですが、iPhoneのブラウザキャッシュなどが原因という事はないでしょうか?
    スマホはキャッシュがキツイので、キャッシュが上手く消せない場合は別のブラウザやシークレットウィンドウなどで今一度確認してみてください。

    #35524

    tammar
    参加者

    お世話になってます。いろいろありがとうございます。
    PCのChromeでシークレットモード、狭幅で動かした動画です。

    2番目のメニューがurl+アンカーとなっており、ここをクリックするとメニューが消えず、その後✖すると裏側で動いていたことが確認できます。
    同じく、iphoneで、chrome,safariともに試してみましたが同じ結果のようです。
    当方の環境の関係か、何かが不足しているのかもしれませんが、思い当たることがなくお手上げ状況です。助けていただければありがたいです。

    #35525

    うなこ
    モデレーター

    リンクの設定ミスのようです。
    メニューのカスタムリンク部分に
    #service の部分 /#service と入れていませんか?

    #35527

    tammar
    参加者

    はい、そのとおりです。当初1番最初の質問に書きました通り

    >どのページからでも(同一ページ・別ページにかかわらず)有効なリンクにしないといけません。従ってURL指定は、>URL+アンカーとしています。(例) frontpage/#hoge
    >なお参考までに、URLをアンカーのみ(例)#hoge にした場合は、自動的にモバイルメニューが閉じて#hogeの個所が
    >表示され、スムーズスクロールも機能します。(ただ、別ページからだと機能しないですが)

    メニューのリンクの指定で

    メニューが閉じない:
    h__p://www.ninegates.jp/#service
    /#service

    メニューが閉じる:
    #service

    という現象です。

    • この返信は4年前にtammarが編集しました。
    #35529

    Vektor,Inc
    キーマスター

    再調整版 4.1.3 をアップいたしました。
    こちらで如何でしょうか?

    お手数おかけして恐れ入りますがご確認くださいませ。

    #35531

    tammar
    参加者

    お世話になります。  4.1.3 でうまくいきました。ありがとうございます。

    また、当初質問で実装いただけないと回答ございました「2スムーズスクロール」につきましては、
    カスタマイズで実装しています。header.phpに直接javascriptを書いておりますので、
    もしよろしければご参考にされてください。

    色々と調査いただき、本当にありがとうございました。

9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • このトピックに返信するにはログインが必要です。