Aktivieren Sie den URL-Anker, aber scrollen Sie nicht dorthin?

Question

Ich habe eine Seite mit zwei Tabs, die ich mit Javascript wechseln können, aber auch den Anker (z. B. page.html#tab1) in der URL für das Bookmarking/Linking setzen.

Standardmäßig befinden sich die Registerkarteninhalte in zwei Divis untereinander, und das Anker-Tag scrollt zum richtigen, wobei JS deaktiviert ist.

Wenn JS aktiviert ist, werden CSS-Klassen angewendet, damit sie als Registerkarten fungieren. Jede Registerkarte ist mit jedem Anker verknüpft. Wenn Sie jedoch klicken, um zwischen den Registerkarten zu wechseln, wird auf die Registerkarte gescrollt. Wenn ich false von der Onclick-Funktion zurückgebe, ändert sich die URL nicht, um den Anker aufzunehmen.

Wie ändere ich die URL des Browsers auf page.html#tab1, aber blättern Sie nicht zu #tab1 ??

Answer 1

Ich habe damit eine Weile gespielt, weil ich Ihnen anfangs nicht geglaubt habe (ich benutze die jQuery history plugin, um ähnliches Verhalten zu bekommen).

Und ich bin ratlos. Ich glaube nicht, dass du es kannst. Was Sie könnte als Workaround tun, ist use javascript to set the hash to something DIFFERENT from what is actually on the page. Und dann benutze Javascript nach dem Laden, um den Hash zu lesen und den richtigen Inhalt zu füllen. I do this on my site. In diesem Szenario würden also Benutzer ohne Javascript gescrollt werden, Benutzer mit Javascript würden die History-Kette behalten, und es wird nur verrückt, wenn Leute ohne Links an Leute senden (oder umgekehrt).

Answer 2

window.location.hash = 'tab1'; 

könnte funktionieren.

Answer 3

Könnten Sie Javascript haben, das die Namen der Anker änderte, window.location.hash und dann die Namen der Anker änderte?

(Ich habe bestätigt, dass andynormancx richtig ist, und Einstellung window.location.hash scrollt die Ansicht, aber ich bin zu faul, um zu testen, wenn ein Anker im DOM zu window.location.hash erstellt auch scrollt.)

Answer 4

var Namespace = { 
    var timer, scroll; 
} 

// Onclick 
Namespace.scroll = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; 
Namespace.timer = setInterval(function() { scrollTo(0, Namespace.scroll) }, 100); 
location.hash = this.href; 
clearInterval(Namespace.timer); 

Answer 5

Eine schnelle Hack:

var thehash = e.target.hash; 
$(thehash).prop('id',thehash.substr(1)+'-noscroll'); 
window.location.hash = e.target.hash; 
$(thehash+'-noscroll').prop('id',thehash.substr(1));  

Dies ändert die ID des HTML-Elements vor und nach dem Hash der URL zu verändern. Funktioniert für mich, könnte aber auch etwas kaputt machen. Dies verhindert, dass der Browser bei einer Hash-Änderung scrollt, da sich kein html-Element mit dieser ID dazwischen befindet.