FirefoxだけscrollTopの位置がずれる

Question

前提・実現したいこと

タブ内のリンクをクリックすると別タブに切り替わり、コンテンツの頭にスクロールして戻るという動作をやりたいのですが、Firefoxだけ上手く動かずつまづいております。

具体的には、初めは上手く動くのですが、ページをリロードすると、スクロールして戻る位置がずれてしまいます。（タブの切り替えは作動します。）
ブラウザを閉じて再度立ち上げると動くようになりますが、リロードするとまたズレてしまいます。

足りない記述等あれば追記いたしますので、ご指摘いただければと思います。
どなたかご教授いただけますと助かります。

該当のソースコード

タブ部分
<input id="panel-1-ctrl" class="panel-radios" type="radio" name="tab-radios" checked>

<ul id="tabs-list">
        <li id="li-for-panel-1">
            <label class="panel-label" for="panel-1-ctrl">タブ1</label>
        </li>
　　　　…～li-for-panel-5まで
</ul>

コンテンツ部分
    <article id="panels">
        <div class="container">
            <section id="panel-1">
                <main>
                  <a href="#" class="button2">次へ</a>
　　　　　　　　　</main>
            </section>
　　　　　　　…～panel-5まで
        </div>
    </article>

  <!-- リロードしたらページトップへ戻る -->
  <script>
    $(function() {
    $('html,body').animate({ scrollTop: 0 }, '1');
});
  </script>

  <!-- タブ内リンク切り替え -->
  <script>
    var position = $("#tabs-list").offset().top;
    $(".button1").on("click", function () {
        $("#panel-1-ctrl").prop("checked", true);
        $('html,body').animate({scrollTop: position}, "500", "swing");
        return false;
    });
    $(".button2").on("click", function () {
        $("#panel-2-ctrl").prop("checked", true);
        $('html,body').animate({scrollTop: position}, "500", "swing");
        return false;
    });
    $(".button3").on("click", function () {
        $("#panel-3-ctrl").prop("checked", true);
        $('html,body').animate({scrollTop: position}, "500", "swing");
        return false;
    });
    $(".button4").on("click", function () {
        $("#panel-4-ctrl").prop("checked", true);
        $('html,body').animate({scrollTop: position}, "500", "swing");
        return false;
    });
    $(".button5").on("click", function () {
        $("#panel-5-ctrl").prop("checked", true);
        $('html,body').animate({scrollTop: position}, "500", "swing");
        return false;
    });
  </script>

Comments

[x_x]

再現しませんでした。再現するコードは載せられるでしょうか？

[hirose080]

x_x様 返信が遅くなり申し訳ありません。 色々とあって結局自己解決しました。 目にとめていただきありがとうございました。

Answer 1

自己解決したので、記入しようと思います。

今回こちらの記述をほぼそのまま使っていました。
http://qiita.com/takanorip/items/078682784ddab03d1c4e
https://teratail.com/questions/83982

■#tabs-list"の高さを取得するタイミングをタブ切換えボタンをクリックした時に変更したところ、ファイヤーフォックスでも動くようになりました。

  <script>
    $(".button1").on("click", function () {
        $("#panel-1-ctrl").prop("checked", true);
        var position = $("#tabs-list").offset().top;
        $('html,body').animate({scrollTop: position}, "normal", "swing");
        return false;
    });
  </script>