###やりたいこと
https://example.com/event#event_houkoku
といったリンクをリロードした際に、
一度#btn1にスクロールした後、そのまま止まらず、開いていたポジションにスクロールが戻ってきてしまいます。
そのまま#btn1に留まるか、もしくはリロードの場合は移動しないか、といったことを実装したいです。
###現在のコード
現在、Bootstrapで作ったタブが2つ(「詳細」と「報告」)あります。
報告が投稿されたときに、メールでお知らせがいきます。
そのメールに記載されたリンクをクリックをした場合に限り、
報告タブを開き、そのポジションまでスクロールさせる機能が実装されております。
html
1<ul class="nav nav-tabs"> 2 <li class="nav-item active"><a href="#event_show" class="nav-link active" data-toggle="tab">詳細</a></li> 3 <li class="nav-item"><a href="#event_houkoku" class="nav-link" data-toggle="tab">経過報告</a></li> 4</ul>
jQuery
1$(function(){ 2 if (location.hash) { 3 var url = window.location.href; 4 var activeTab = url.substring(url.indexOf("#") + 1); 5 $('a').removeClass("active in"); 6 $('a[href="#'+ activeTab +'"]').tab('show'); 7 $("html,body").animate({scrollTop:$('a[href="#'+ activeTab +'"]').offset().top}); 8 return false; 9 } 10});
リンクをクリックし、ブラウザを新しく開いたときは、IDまでスクロールし、そのポジションで止まります。
(ポジションA)
しかし、画面内で違うポジション(ポジションB)に移動したあとにリロードをすると、
ポジションAまでスクロールした後に、ポジションBにもう一度戻ってきてしまいます。
どの部分が原因か分からず、どなたか解決の糸口を教えて頂けませんでしょうか?
どうぞよろしくお願い申し上げます。
回答1件
あなたの回答
tips
プレビュー