前提・実現したいこと
タブ内のリンクをクリックすると別タブに切り替わり、コンテンツの頭にスクロールして戻るという動作をやりたいのですが、Firefoxだけ上手く動かずつまづいております。
具体的には、初めは上手く動くのですが、ページをリロードすると、スクロールして戻る位置がずれてしまいます。(タブの切り替えは作動します。)
ブラウザを閉じて再度立ち上げると動くようになりますが、リロードするとまたズレてしまいます。
足りない記述等あれば追記いたしますので、ご指摘いただければと思います。
どなたかご教授いただけますと助かります。
該当のソースコード
HTML
1タブ部分 2<input id="panel-1-ctrl" class="panel-radios" type="radio" name="tab-radios" checked> 3 4<ul id="tabs-list"> 5 <li id="li-for-panel-1"> 6 <label class="panel-label" for="panel-1-ctrl">タブ1</label> 7 </li> 8 …~li-for-panel-5まで 9</ul> 10 11コンテンツ部分 12 <article id="panels"> 13 <div class="container"> 14 <section id="panel-1"> 15 <main> 16 <a href="#" class="button2">次へ</a> 17 </main> 18 </section> 19 …~panel-5まで 20 </div> 21 </article>
script
1 <!-- リロードしたらページトップへ戻る --> 2 <script> 3 $(function() { 4 $('html,body').animate({ scrollTop: 0 }, '1'); 5}); 6 </script> 7 8 <!-- タブ内リンク切り替え --> 9 <script> 10 var position = $("#tabs-list").offset().top; 11 $(".button1").on("click", function () { 12 $("#panel-1-ctrl").prop("checked", true); 13 $('html,body').animate({scrollTop: position}, "500", "swing"); 14 return false; 15 }); 16 $(".button2").on("click", function () { 17 $("#panel-2-ctrl").prop("checked", true); 18 $('html,body').animate({scrollTop: position}, "500", "swing"); 19 return false; 20 }); 21 $(".button3").on("click", function () { 22 $("#panel-3-ctrl").prop("checked", true); 23 $('html,body').animate({scrollTop: position}, "500", "swing"); 24 return false; 25 }); 26 $(".button4").on("click", function () { 27 $("#panel-4-ctrl").prop("checked", true); 28 $('html,body').animate({scrollTop: position}, "500", "swing"); 29 return false; 30 }); 31 $(".button5").on("click", function () { 32 $("#panel-5-ctrl").prop("checked", true); 33 $('html,body').animate({scrollTop: position}, "500", "swing"); 34 return false; 35 }); 36 </script>
回答1件
あなたの回答
tips
プレビュー