Attivare l'ancoraggio dell'URL ma non scorrere fino ad esso?

Question

Ho una pagina con due schede che voglio essere in grado di passare con Javascript, ma anche impostare l'ancora (ad esempio page.html#tab1) nell'URL per il segnalibro/collegamento.

Per impostazione predefinita, il contenuto della scheda si trova in due div, uno sotto l'altro, e il tag di ancoraggio scorrerà a quello corretto, con JS disabilitato.

Con JS abilitato, le classi CSS vengono applicate per farle funzionare come schede. Ogni scheda contiene collegamenti a ciascun ancoraggio, ma quando si fa clic per cambiare scheda, la pagina scorre fino alla scheda. Se restituisco false dalla funzione onclick, l'URL non cambia per includere l'ancora.

Come faccio a modificare l'URL del browser in page.html#tab1 ma non scorrere fino a #tab1 ??

Answer 1

Ho giocato con questo per un po ', perché inizialmente non ti credevo (io uso il jQuery history plugin per ottenere un comportamento simile).

E io sono perplesso. Non penso che tu possa Che cosa è potrebbe fare, come soluzione alternativa, è use javascript to set the hash to something DIFFERENT from what is actually on the page. E quindi utilizzare javascript su caricamento per leggere l'hash e popolare il contenuto corretto. I do this on my site. Quindi, in tale scenario, gli utenti senza javascript sarebbero scrollati, gli utenti con javascript manterrebbero la catena della cronologia, e diventerebbe stranamente solo quando le persone senza inviare collegamenti a persone con (o viceversa).

Answer 2

window.location.hash = 'tab1'; 

potrebbe funzionare.

Answer 3

Si potrebbe avere qualche Javascript che ha cambiato i nomi di ancoraggio, impostare window.location.hash e quindi aver cambiato i nomi di ancoraggio?

(Ho confermato che andynormancx ha ragione, e l'impostazione window.location.hash scorre la vista, ma sono troppo pigro per verificare se si crea anche un ancoraggio nel DOM a window.location.hash scorre anche.)

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

Un trucco veloce:

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));  

questo cambia l'id dell'elemento HTML prima e dopo aver cambiato l'hash dell'URL. Funziona per me, ma potrebbe anche rompere qualcosa. Ciò impedisce al browser di scorrere su una modifica hash, poiché non c'è un elemento html con quell'id in mezzo.