アンカータグからのスクロールの防止

Question

コンテンツペインを表示または非表示にしてロードするjQueryを使用して簡単なナビゲーションを行います。アンカータグを使用して表示するウィンドウを決定しています。私はまた、ページがロードされたときに#hash要素を表示するために "準備完了"機能を使用します。かなり基本的な：

$(document).ready(function() { 
    $('#video_form_content > div').hide(); 
    var showTab = window.location.hash || "#basic-info"; 
    $(showTab).show(); 
} 

$('#video_form_tabs li').on('click', function() { 
    $('#video_form_content > div').hide(); 
    var target = $(this).children('a').attr('href'); 
    $(target).show(); 
}) 

何が起こっている、しかし、要素がクリックされたとき、ページがターゲットdivの一番上にジャンプするということです。私はこのジャンプを望んでいませんが、アンパックタグのデフォルトの機能を保持して、ハッシュをURLに追加して、同じタブをリフレッシュするとそのタブを再び開くようにしたいと考えています。

は、ここで私は、クリックイベントに$(window).scrollTop(0)を追加

• を試してみたものです。私は思ったかもしれませんが、このイベントはアンカー要素の実際のナビゲーションの前に発生しますので、直ちに元に戻します。
• $(window).scrollTop(0)〜$(document).ready()ただし、このリスナーは、同じページのアンカーをクリックしても起動されません。
• クリックイベントにwindow.location.hash = targetまたはwindow.location.href = targetを追加します。しかし、これは依然としてページの再送信を引き起こし、それは依然として「ジャンプ」します。
• return falseを関数に追加します。これにより、URLにハッシュを追加することができなくなります。

これは本当に私を困惑させるものであり、どんな助けでも大歓迎です。

Answer 1

#basic-info-TABなどのターゲットを指定してdivを指定し、次にtarget変数に"-TAB"を追加します。

Answer 2

あなたがアンカーにイベントを添付し、デフォルトイベントハンドラ取り消す必要があります：あなたは、URL内のハッシュを保持したい場合は、手動で

e.preventDefault(); // stop browser from following href 
var url = $(this).prop('href'); // get href 
var hash = url.split('#'); // get the hash-part 
if(hash.length > 1) location.hash = hash[1]; // rewrite the url 

それを追加する必要が

$(document).ready(function() { 
    $('#video_form_content > div').hide(); 
    var showTab = window.location.hash || "#basic-info"; 
    $(showTab).show(); 
} 

$('#video_form_tabs li a').on('click', function(e) { 
    e.preventDefault(); // stop browser from following href 
    $('#video_form_content > div').hide(); 
    var target = $(this).attr('href'); 
    $(target).show(); 
}) 

Answer 3

を私はChromeでこれをテストしており、そこではうまくいきます。

Answer 4

私の方法は、クリック可能な要素に共通のクラスを追加し、タイムアウト0のsetTimeoutを実行することです。私の場合、クリック可能な要素に "top"のクラスを追加しました。

$(".top").click(function(){ 
    setTimeout(function(){ 
     window.scrollTo(0, 0); 
    }, 0); 
}) 

あなたは何でもあなたが好きにx、y座標を設定することができます。

scrollTo(X, Y); 

迅速かつ簡単に！

現在のスクロール位置に保つために、これを行います。

$(".top").click(function(){ 
    var position = $(document).scrollTop(); 
    setTimeout(function(){ 
     window.scrollTo(0, position); 
    }, 0); 
})