モバイルフッターメニュー表示の時、機種に関係なく本現象が発生します。

----------------------------------------------
テーマ名：Cocoon
バージョン：2.5.8.4
カテゴリー数：19
タグ数：147
ユーザー数：1
----------------------------------------------
●原因
モバイルメニュー「#TOP」「#TOC」ボタンのリンク先がhref="."となっている。
この為、メニュークリック後、ページがリロードされる。

https://github.com/xserver-inc/cocoon/blob/84adff68338ea2bc4ad9fd0518cf22bbc1c342de/tmp/mobile-top-button.php#L22

https://github.com/xserver-inc/cocoon/blob/84adff68338ea2bc4ad9fd0518cf22bbc1c342de/tmp/mobile-toc-button.php#L24

●対策
href="#"では？

既に、chu-yaさんもお書きになっていますが、href="."みたいですね。

https://github.com/xserver-inc/cocoon/commit/161f2bfd716d4ec3bffd8fbf97477def60493213

ちなみに、パーマリンクが「数字ベース」の場合。
（「https: //ドメイン/archives/123」のような場合）

リンク先が、「https: //ドメイン/archives/」になってしまうので、タップすると「404」になります。

クリックしたら JavaScript で移動させているため href を書けない、けど href を書かないと Lighthouse（PageSpeed Insights）で「リンクはクロールできません」と指摘されるための変更でしょうか。

PageSpeed InsightsのSEO項目のリンククロール対策（SNSボタンやモバイルメニューボタン）

<a> ではなく <button> で作るのが 1 番いいと思います。

もしくは、JavaScript を削除して、href はきちんと書き CSS の scroll-behavior: smooth を使うかでしょうか。ただ、scroll-behavior: smooth は他のページ内リンクにも影響するのが欠点かもしれません。

ご連絡ありがとうございます。
とりあえず一旦href="."を削除することで対応しました。
もともとbuttonで対応させようとしていたのですが、どうしてもCSSを大きく変更する必要がありCSSの優先度が変わってしまうため、ユーザーさんのカスタマイズに影響が出てしまう恐れがあったため取りやめました。
https://github.com/xserver-inc/cocoon/commit/0b8639684d71aef1c504a09f5642e47aad7c6892
僕の環境（パソコン）では問題なかったんですが確かに皆さんが書かれているようなことも起こりますね。申し訳ないです。

今後完全に対応するとしたらCSS優先度が上がるのを承知の上でするしかないかもしれません。
とはいえPageSpeed Insightsでポイントが数点下がるだけなので、実質的にはhref="."を削除が最も影響はないのかなと思います。

ご対応いただきありがとうございます。

修正され、動作も問題ないことを確認しました。

投稿者:: @yhira

↑

もともとbuttonで対応させようとしていたのですが、どうしてもCSSを大きく変更する必要がありCSSの優先度が変わってしまうため、ユーザーさんのカスタマイズに影響が出てしまう恐れがあったため取りやめました。

これは確かに・・・。

最近はないですが、一昔前はモバイルフッターボタンのカスタマイズのご質問がそこそこあった記憶があります。
私も少しだけしているので、buttonに変更されるならと、修正するつもりで待ち構えていました。

影響のある方は多いかもしれないですね。

トピック主のtonchinさんにも、ご確認いただければと思います。

この部分で一旦修正は試みたのですが
https://github.com/xserver-inc/cocoon/commit/4e637e03c18331d250b9f663acc3b20a8c5ce47e
CSS優先度が変わるので一旦元に戻して
https://github.com/xserver-inc/cocoon/commit/d65071c4d910d74397c8666fb1388226cb74f871
ついhref="."で対応をしてしまった感じです。
https://github.com/xserver-inc/cocoon/commit/161f2bfd716d4ec3bffd8fbf97477def60493213
mk2さんが書かれた通り、フォーラムなどでもモバイルメニューのカスタマイズの問い合わせが多かったことから「変更して良いものか？」と悩みました…。
一旦最初のものに変更してみて、様子を見てみるというのもありかもしれませんね。
でも変更してしまったら元に戻せなくなるような気がします。

個人的には・・・（無責任な発言かもしれないですが）。

「べき論」で言えば、修正なのかもしれないです。
ただ、必ず修正しなければならないものでなければ、今のままで良いのではないかと、私は思います。

変更してしまうと、やはり影響は大きいと思います。
そして、ご利用の方々の反応も多い気がします。

その際は、仕様が変わった（あるべき姿になった）とは捉えてはもらえずに、不具合だという反応が強そうで、ちょっと怖い感じがします。
（WordPress 6.0や6.1の頃を見ても、事前に対応しているのに、それでも不具合だと(VerUpを怠っているのに)。6.2は事前に対応したんだね的な発言もあり・・・そうじゃないんですけどねぇ）

ご利用の方々に影響がないのが良いのかな・・・と思います。
（必ずそうしなければならないのであれば、別ですけれど）

<a> タグを維持される場合は、preventDefault() でブラウザの動作を停止するといいかもしれません。

例えば目次の場合、<a> タグに href 属性を書きます。

https://github.com/xserver-inc/cocoon/blob/master/tmp/mobile-toc-button.php#L24

<a href="#toc"

そして、<a> タグをクリックした時の処理に preventDefault() を追加します。

https://github.com/xserver-inc/cocoon/blob/master/javascript.js#L45-L51

$('.go-to-toc-common').click(function (event) {
  event.preventDefault();
  //目次へ移動する
  $('body,html').animate(
    {
      scrollTop: $('.entry-content .toc').offset().top,
    },
    800
  );
});

 通常の <a> タグをクリックした時と同じく、URL を変更し履歴に残すのもいいかもしれません。

const addFragment = (fragment) => {
  const url = new URL(location.href);
  url.hash = fragment;
  history.pushState(null, '', url.href);
};

$('.go-to-toc-common').click(function (event) {
  event.preventDefault();
  addFragment('toc');
  //目次へ移動する
  $('body,html').animate(
    {
      scrollTop: $('.entry-content .toc').offset().top,
    },
    800
  );
});

ただ、親テーマを変更していて不思議だったのが、href="#toc" にした場合に JavaScript を何も変更せずとも正常に動いてる。preventDefault() とか不要かもしれません。

投稿者:: @akira

↑

ただ、親テーマを変更していて不思議だったのが、href="#toc" にした場合に JavaScript を何も変更せずとも正常に動いてる。

試してみたら確かにそうでした。
冒頭でchu-yaさんが書かれたようにhref="#"でも動作したので変更しておきました。
https://github.com/xserver-inc/cocoon/commit/4b5914fc8468c6ff3e84e0012703c1f4077faa13

これだと別の問題があったりしたりするんだろうか。

私の環境では、デベロッパーツール上でも、スマホ（Android）実機でも、動作していますね。

全て href="#" にするのは、まずいと思います。

href="#" は現在のページの先頭へのリンクのため、「トップボタン」には適しています。ただ、「目次へボタン」と「コピーボタン」は、私であれば変更します。

「目次へボタン」は、#toc が適しているように思えます。

<a href="#toc"

「コピーボタン」はリンク先がないため、href は書かず role="button" を使うのはどうでしょうか？

<a role="button" tabindex="0"

一応 Lighthouse で確認したところ、これであれば指摘されませんでした。また、axe DevTools でも、これらの <a> タグに関するアクセシビリティのエラーを指摘されませんでした。

ご確認ありがとうございます。
#tocは必ずしもid="toc"がある部分に飛ぶわけではないので#にしてしまいました。
ただあってもなくても動作は同じなのと動作意図も伝わりやすいので#tocに変更しておきました。
role="button"の発想はなかったです。こちらも修正しておきました。
https://github.com/xserver-inc/cocoon/commit/04cf5b739f16a6a7168291ac8bdc26cf9a5760ca
PageSpeed Insights（Lighthouse）でもチェックしてみましたが僕の環境でも問題ありませんでした。
素晴らしい解決方法を教えてくださりありがとうございます！

role="button" を使う場合は、tabindex="0" も必要です。tabindex="0" がない場合は、tab キーで操作した時にフォーカスが当たらなくなります。

<a role="button" tabindex="0"

#tocは必ずしもid="toc"がある部分に飛ぶわけではない

申し訳ないです。ショートコードやプラグインの目次を考慮していませんでした。

であれば、Google クローラーなども考慮し、「目次へボタン」も role="button" tabindex="0" がいいかもしれません。リンク先の id="toc" がない時も href="#toc" とするのは、何か気持ち悪いです。

もしくは、Cocoon 設定 > 目次の「目次を表示する」のチェックの有無で切り替えるのもいいかもしれません。

例えば、tmp/mobile-toc-button.php をこのように変更するとかでしょうか。

<?php
省略
$link_attr = is_toc_visible() ? 'href="#toc"' : 'role="button" tabindex="0"';
?>
省略
<a <?php echo $link_attr; ?> class="go-to-toc-common toc-menu-a menu-button-in"<?php echo $on; ?>>

投稿者:: @akira

↑

role="button" を使う場合は、tabindex="0" も必要です。

そうなんですね。追加しておきました。
https://github.com/xserver-inc/cocoon/commit/dd0fae3035ef2815800fed0a876f49a22bd58a4f

投稿者:: @akira

↑

であれば、Google クローラーなども考慮し、「目次へボタン」も role="button" tabindex="0" がいいかもしれません。リンク先の id="toc" がない時も href="#toc" とするのは、何か気持ち悪いです。

そうですね。確かにそうかもしれません。
こちらも同様に変更しておきました。
ありがとうございます！

お手数をおかけしました。

こちらこそお手数おかけしました。
ありがとうございます。