HOME フォーラム Lightning スマホ表示時メニューを閉じるとアンカーリンクが解除されてページ先頭にもどる

タグ: 

このトピックには8件の返信が含まれ、4人の参加者がいます。3 ヶ月前 engladcow さんが最後の更新を行いました。

9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • 投稿者
    投稿
  • #7153

    page1
    参加者

    はじめまして よろしくお願いします。
    Lightningについてご質問です。
    スマホ表示の時のメニューでアンカーリンクはされるのですが、
    メニューをたたむと同時に先頭に戻ってしまいます。
    これではリンクした意味がありません。私の使い方が間違っているのかもしれませんが、
    PC表示の場合は問題ありませんので何か問題があるのかと…?。
    どうしたらよいでしょうか。ページ内リンクはどうしてもやりたいので、
    できれば対処方法を教えていただけると助かります。

    #7154

    magonote
    モデレーター

    少し前の話ですが、スマホではアンカーリンクが無効になるというのがありました。。。
    最近はどうなっているのかわかりませんが、タップした時のアドレスに
    アンカー(#○○○)が付いているかどうかを見ると、アンカーが効いているかどうかわかると思います。
    当時はJSで対応しましたので、ググれば情報があると思います。
    あとは、アンカーリンクにスラッシュの有無とかですかね
    a href=”○○○#id名”>・・・動かない
    a href=”○○○/#id名”>・・・動く

    #7155

    page1
    参加者

    magonote様
    ありがとうございました。正しくおっしゃるとおりでした。
    メニューのリンク部分を「○○○/#id」にしたら動きました。
    今までは「#id」のみ書いていたので動かなかったみたいです。
    私の初歩的なミスのようです。なまじっかPCで動いてしまったため
    混乱してしまいました。
    たいへん助かりました。また勉強になりました。

    #7159

    page1
    参加者

    いろいろとご教授いただいたのにごめんなさい。
    どうやらまだ完璧ではなかったようです。
    たまたまマックのサファリで開いたところ
    アンカーリンクが効かなくなってしまいました。
    すべて先頭にリンクしてしまいます。
    いろいろといじってみたのですがうまくいきません。
    現在はフルパスにindex.phpを加えてあります。
    この「index.php」を外すとサファリでも動くのですが
    今度はまたスマホが動かなくなります。
    スマホ主体のサイトなのでスマホが動かないのは困ります。
    http://oooo.com/ooo/index.php/#p01
    といったパス表記になっております。
    たぶん私のやり方が間違っていると思いますので
    お手数をおかけして恐縮ですが、どなたか
    原因を究明していただけると助かります。

    #7174

    yohei_e2
    参加者

    はじめましてpage1様、magonote様。

    私も同じ状態(表題のスマホ表示時メニューを閉じるとアンカーリンクが解除されてページ先頭にもどる)に悩まされています。
    おそらく「閉じるとき」ではなく、スマホメニューを開いた瞬間、強制的にページ上部に移動しているため、それを防ぐことができれば、こちらの問題は解決できるかと思ったのですが…

    ただ、all_in_header_fixed.min.jsのgMenu controlなどを眺めても、どこを修正すればいいのかわかりませんでした…

    もしお心当たりの方がいらっしゃいましたら、アドバイス頂ければ幸いです。

    #7179

    page1
    参加者

    はじめまして yohei_e2様
    すみません問題解決の投稿ではありませんが同志の方が現れてたいへん心強いです。
    たぶんこういった問題にぶつかっている人は他にもいるかもしれませんね。
    このテンプレートに限らずブラウザー間の問題として何かしらコツがいるような気がします。
    何か回避策があれば助かりますが、いろいろいじっておりますが未だ解決には至っておりません。
    そもそもリンク先の設定があいまいなのが気になります。cmsなので難しいのかもしれませんが、
    テンプレートの問題なのかWP運用上の問題なのか悩むところです。

    現状は
    ….com/index.php/#p01
    になっております。
    「index.php」を付ければスマホで機能しますが、マックのサファリではリンクしなくなります。
    cromeやFirefoxのアドレス欄を見るとindex.phpは省かれて、….com/#p01になり、ちゃんと
    リンクが機能しています。

    サファリではこの「index.php」に加え「#p01」までもが省かれ、「….com/」だけになってしまいます。
    アドレスを直で入力しても「index.php」と「#p01」両方省かれます。たぶん「index.php」だけ
    省かれればcromeやFirefoxと同様の動きをするのでしょうが、ブラウザー間の違いなのか?よくわかりません。

    今はスマホ優先で「index.php」を付けてあるのですが、マックやPCのサファリを検出したら「index.php」を省くといったコードをどこかに入れれば動くかもしれません。
    (あまりスマートな解決策ではありませんが…)

    何か私が変な設定をしているかもしれませんが、プログラムにうとい私ですので
    あまり深入りできてないのが現実です。

    フォーラムの皆様、引き続きこの問題に取り組んでいただけることを切に望みます。
    お手数をおかけしますが宜しくお願いします。

    #7290

    yohei_e2
    参加者

    page1様、ありがとうございました。

    その後色々と悪戦苦闘したのですが、lightningだけの問題では無いのではと思い、同症状をBootstrapで検索してみると、少し似た問題が取り沙汰されていました。
    アンカーリンクだけのメニューであれば、「そもそも閉じるボタンを押す必要がない」ということで、
    タップした瞬間にメニューを隠す方法が幾つか挙げられていました。
    私はこちらを参考にさせて頂きましたが、

    Bootstrap でリンククリック時にcollapseメニューを閉じる処理

    all_in_header_fixed.min.js にこのような形で

    $(document).ready(function () {
    $(".gMenu li a").click(function(event) {
    jQuery('body').removeClass('headerMenuOpen');
    jQuery('.menuBtn').removeClass('menuOpen').addClass('menuClose');
    jQuery('#gMenu_outer').removeClass('itemOpen').addClass('itemClose');
    jQuery('#menuBtn i').removeClass('fa-times').addClass('fa-bars');
    });
    });

    イチかバチかで追加したところ、一応意図通り、「タップした瞬間にメニューが閉じる」という動作をしてくれたため、使う分には不自由がなくなりました。

    素人が見よう見まねで継ぎ足したコードですので、正直まともに動いているのか単にエラーでメニューが閉じてしまっているのかすら解りかねるのですが、応急処置の一つとして、ご参考までに。

    #7295

    page1
    参加者

    yohei_e2様
    お世話になっております。

    ありがとうございます。
    早速試してみたところ、ちゃんとメニューが閉じました。

    実験した結果、縦展開メニューの場合はきちんと閉じたのですが、
    横スライドメニューは横にスライドしたままで閉じませんでした。
    私だけのもんだいかもしれませんが…
    しかしながら今私が作っているサイトで横スライドは使ってないので、
    これだけうまくいけば十分です。たいへん助かりました。

    私の経験値ではここまでたどり着けませんでした。
    ありがとうございます。感謝です!

    #8906

    engladcow
    参加者

    Не совсем согласен[url=http://kr.usaeducation.ru/]![/url]

9件の投稿を表示中 - 1 - 9件目 (全9件中)

このトピックに返信するにはログインが必要です。