scrollTo dopo un href con jQuery/JavaScript

Question

Sto costruendo una pagina Web html e il problema principale per ora è che non so come scorrere a una sezione della pagina dopo aver fatto clic su un nuovo collegamento. Quello che ho fatto è stato ho usato il metodo scrollTop jQuery:

$("#klienti2").click(function(){ 
    $('.parallax').animate({ scrollTop: windowHeight }, 'slow'); 
}); 

e arrotolato la quantità di WindowHeight dalla parte superiore dello schermo. Scelgo questo metodo per usare la navigazione con id, perché non c'è alcun contenuto nel punto in cui ho bisogno di scorrere.

Quindi quello che sto cercando ora è di fare la stessa cosa dopo aver reindirizzato a questa pagina da una pagina diversa. Quello che ho provato è stato:

$("#audio2").click(function(){ 
    window.location.href = "prew2.html"; 
    $('.parallax').animate({ scrollTop: windowHeight*2.6 }, 'slow'); 
}); 

ma ora si reindirizza a quella pagina senza scorrere. Qualche idea, perché? Ho pensato che, inserendo il codice, dovresti posizionarlo nella posizione e quindi animare nella posizione specificata, ma sembra ignorare l'animazione.

Answer 1

Lo script dice al browser di aprire un nuovo URL al click

window.location.href = "prew2.html"; 

Ora il browser naviga a questo indirizzo, fermando tutti gli script attuali e la costruzione di una nuova DOM.

$('.parallax').animate({ scrollTop: windowHeight*2.6 }, 'slow'); 

Questo codice non viene mai raggiunto e non verrà mai eseguito.

Answer 2

Posizionare al di fuori dell'istruzione di clic originale e sulla pagina a cui si sta navigando.

if(window.location.href === "prew2.html"){ 
    $('.parallax').animate({ scrollTop: windowHeight*2.6 }, 'slow');  
} 

Una semplice istruzione if controlla e poi applicare le modifiche quando si raggiunge tale URL

Answer 3

Da commento: HTML è apolide. Una volta modificato href, tutto ciò che segue viene ignorato mentre il codice viene scaricato. È necessario passare qualcosa alla pagina di ricezione (ad esempio un parametro stringa di query su prew2.html) e rispondere a quello invece dall'interno di prew2.html.

La pagina di ricezione deve sapere se, o non, scorrere fino alla posizione desiderata. Quella decisione se scorrere, o no, è fatta dal chiamante.

Il metodo ovvio è passare un parametro nella stringa di query. Dato che questo codice si comporta proprio come un URL segnalibro, si potrebbe anche utilizzare un URL segnalibro per l'attività e verificare la presenza di uno specifico valore segnalibro:

Nella tua prima pagina il codice di collegamento sarebbe qualcosa di simile:

$("#audio2").click(function(){ 
    window.location.href = "prew2.html#doitnow"; 
}); 

Naturalmente se questo è solo un ancoraggio normale, questo avrebbe fatto lo stesso:

<a id="audio2" href="prew2.html#doitnow">Click me</a> 

Nella pagina di ricezione il codice sarebbe stato così:

$(function(){ // Shortcut for DOM ready handler 
    if (location.href.indexOf("#doitnow") >=0){ 
     $('.parallax').animate({ scrollTop: windowHeight*2.6 }, 'slow'); 
    } 
});