2012-05-24 1 views
62
<div id="containerDiv"></div> 
#containerDiv { 
    position: absolute; 
    top: 0px; 
    width: 400px; 
    height: 100%; 
    padding: 5px; 
    font-size: .875em; 
    overflow-y: scroll; 
} 
document.getElementById("containerDiv").innerHTML = variableLongText; 

Come resettare la posizione di scorrimento torna all'inizio del div del contenitore la prossima volta?Scorrere Torna all'inizio della div

risposta

105
var myDiv = document.getElementById('containerDiv'); 
myDiv.innerHTML = variableLongText; 
myDiv.scrollTop = 0; 

Vedi l'attributo scrollTop.

+0

Provato ma non ha funzionato. Quando una variabileLongtext è caricata nel contenitore div e sto guardando al centro di essa, quindi scorri verso la nuova variabile Longtext, verrà mostrata nel contenitore, ma non guarderemo in cima ad essa, sarà già scorsa giù un po '. – imhere

+0

@ s12345 Faresti un caso di test riproducibile mostrandoci il tuo problema (ad es. Su http://jsfiddle.net) e dì su quale OS/browser/versione stai sperimentando. – Phrogz

+1

Scusa il mio errore .. funziona! Mi sono confuso con due div simili. – imhere

50

Un altro modo per farlo con un'animazione fluida è come questo

$("#containerDiv").animate({ scrollTop: 0 }, "fast"); 
+6

Funziona bene, ma ** per favore ** non usare 'slow', è così ... lento! – Pascal

+1

Invece di passare 'slow' come secondo argomento. È possibile passare un numero intero che corrisponde al numero di millisecondi per il completamento dell'animazione. –

+0

Questo è il modo migliore che Iv ha trovato finora. Sembra buono con il secondo argomento impostato su "veloce", 1000 o 500. – ekerner

18

ho cercato le risposte esistenti a questa domanda, e nessuno di loro ha lavorato su Chrome per me. Ciò che ha funzionato è stata leggermente diversa:

$('body, html, #containerDiv').scrollTop(0); 
0

Per me il modo scrollTop non ha funzionato, ma ho trovato altro:

element.style.display = 'none'; 
setTimeout(function() { element.style.display = 'block' }, 100); 

non ha controllato il tempo minimo per il rendering CSS affidabile, però, 100ms potrebbero essere eccessivo.

8

scrollTo

window.scrollTo(0, 0); 

è la soluzione definitiva per lo scorrimento delle finestre verso l'alto - la parte migliore è che non richiede alcuna selettore id e anche se usiamo la struttura IFRAME che funzionerà estremamente bene.

Il metodo scrollTo() consente di scorrere il documento alle coordinate specificate.
window.scrollTo (xpos, ypos);
xpos Numero richiesto. La coordinata per scorrere verso, lungo l'asse x (orizzontale), in pixel
ypos Numero richiesto. La coordinata scorrere, lungo l'asse y (verticale), in pixel

jQuery

Un'altra opzione per fare la stessa sta usando jQuery e darà un aspetto più uniforme per la stessa

$('html,body').animate({scrollTop: 0}, 100); 

dove 0 dopo lo scrollTop specifica la posizione di scorrimento verticale nel pixel e il secondo parametro è un parametro facoltativo che indica il tempo in microsecondi per completare l'operazione.

5

Per coloro che ancora non riescono a farlo funzionare, assicurarsi che l'elemento overflow sia visualizzato prima di utilizzare la funzione jQuery.

Esempio:

$('#elem').show(); 
$('#elem').scrollTop(0); 
+0

Risparmio di vita! Stava cominciando a perdere la voglia di vivere con scrollTop che non funzionava! dovevo mettere la mia chiamata scrollTop in una funzione setTimeout. –

1

Se l'overflow contenuto HTML una singola finestra, questo ha funzionato per me usando solo javascript:

document.getElementsByTagName('body')[0].scrollTop = 0; 

saluti,

0

questo ha funzionato per me:

document.getElementById('yourDivID').scrollIntoView(); 
0

Se si desidera scorrere con una transizione fluida, è possibile utilizzare questo!

(Vanilla JS)

const tabScroll = document.getElementById("tabScroll"); 
window.scrollTo({ 
    'behavior': 'smooth', 
    'left': 0, 
    'top': tabScroll.offsetTop - 80 
}); 

Se gli utenti target sono Chrome e Firefox, allora questo è buono! Ma sfortunatamente questo metodo non è supportato abbastanza bene su tutti i browser. Check Here

Spero che questo aiuti !!