jquery アコーディオン 元の位置に戻る方法について

Question

【解決したいこと】

「開く」のボタンがクリックされた際、「answer」のclassが付与された部分が表示されるアコーディオンを
作成したのですが、iphoneの実機で、「answer」の部分が1000px以上あるような縦に長い場合、
「閉じる」ボタンをクリックしても、元の位置に戻らないため、戻るように修正したいです。

chromeの検証で、iphoneのサイズにしてクリックすると元の位置に戻るのですが、実機のiphoneでやると
戻らず、Andoroidなどは戻るため端末によっても違いが見られます。

該当のソースコードは下記です。
js内の$("html,body").animate({scrollTop:$answer2.offset().top},"fast","swing");
の部分で、戻る動作を追加したのですが、元の位置に戻らないため
、修正箇所についてご教授いただきたいです。お願いいたします。

<div class="inner">
	<div class="question action">
			XXXXXXXXXXXXXX
	</div>
	<div class="access_box_btn action">
		<p class="btn_brown_down">開く</p>
	</div>
	<div class="answer">
		<div class="access_guide">
XXXXXXXXXXXXXXXXXXXXXXXXXXXX
		</div>
	</div>
</div>

$(function () { 

$(".action").on("click", function (e) {
  var $answer = $(this).parent('.inner');
  var $answer2 = $answer.find('.answer');
  e.preventDefault();
  if (!$answer2.hasClass("active")) {
   $answer.find('.btn_brown_down').text('閉じる');
   $answer.addClass("open");
   $answer2.addClass("active");
		$("html,body").animate({scrollTop:$answer2.offset().top},"fast","swing");
  } else {
   $answer.find('.btn_brown_down').text('開く');
   $answer.removeClass("open");
   $answer2.removeClass("active");
  }
 });
	
	});

.answer {
    opacity: 0;
}

.answer.active {
    opacity: 1;
}

Answer 1

iphone8plusで実機確認しましたが、正常動作しました。

javascriptが動いてないのでは？

「設定」➡「safari」➡「詳細」➡「JavaScriptをON」

一度確認してみてはどうでしょうか？

あとよくわからなかったのが、

iphoneの実機で、「answer」の部分が1000px以上あるような縦に長い場合、

「閉じる」ボタンをクリックしても、元の位置に戻らないため、戻るように修正したいです。

iphoneで縦1000pxもあるのか疑問でした。ipadとかですか？

Comments

[kurio]

実機でご確認いただきありがとうございます!
動いているのですね。私の端末はiphone6sなのですが
設定を見るとjavascriptはオンになっていたため
端末の種類にもよるのかもしれません。
こちらでもiphone6s以外でも確認して見たいと思います。

[KazuSaka]

iOSでクリックイベントが動かない事例があるみたいです。
以下、参考にどうぞ。(iPhone6sで起きている記事です。)
https://chaika.hatenablog.com/entry/2017/11/24/090000