2010-03-03 3 views
30

Ho un GridView all'interno di un div ... voglio scorrere fino alla parte superiore del div dal fondo del div utilizzando jQuery ... Ogni suggerimento ....Come scorrere all'inizio di un div usando jquery?

<div id="GridDiv"> 
// gridview inside... 
</div> 

mio GridView avrà personalizzato impaginazione generato linkbuttons in essa ... mi scorrere fino alla parte superiore del div dal basso sul pulsante di collegamento click ...

protected void Nav_OnClick(object sender, CommandEventArgs e) 
    { 
     LinkButton lb1 = (LinkButton)sender; 
     //string s = lb1.ID; 
     ScriptManager.RegisterClientScriptBlock(lb1, typeof(LinkButton), 
"scroll", "javascript:document.getElementById('GridDiv').scrollTop = 0;", true); 

al posto di javascript i ll chiamo la funzione di jQuery ... Qualsiasi suggerimento ...

EDIT:

Esattamente come StackOverflow domande per pagina utente ... Quando si cambia pagina nos scorre verso l'alto con effetto liscio .... voglio acheive che ...

+0

Forse sto fraintendendo, ma perché non usi solo gli ancoraggi di pagina? –

risposta

6

Si potrebbe utilizzare:

<div id="GridDiv"> 
// gridview inside... 
</div> 

<a href="#GridDiv">Scroll to top</a> 
+5

Non hai bisogno delle ancore. Basta andare su #GridDiv. –

+30

+1 per una soluzione tecnicamente brillante al problema dell'utente ... ma completamente inutile a chiunque cerchi una risposta alla domanda vera e propria. (Le ancore NON risolvono il mio problema, ho bisogno di far scorrere lo schermo verso l'alto di un div usando javascript! - Lamentarsi perché questo era il risultato di google migliore per me) – RonLugge

+0

@RonLugge In tal caso, la risposta di Greg Mathews potrebbe aiutare. Prova a impostare o ad animare la proprietà 'scrollTop'. –

148

Ecco cosa si può fare utilizzando jQuery:

$('#A_ID').click(function (e) { //#A_ID is an example. Use the id of your Anchor 
    $('html, body').animate({ 
     scrollTop: $('#DIV_ID').offset().top - 20 //#DIV_ID is an example. Use the id of your destination on the page 
    }, 'slow'); 
}); 
+2

fantastico, dovresti ottenere 100 upvotes per questo. – Prateek

+0

Questo è perfetto. – BaconJuice

+2

Perché esiste un valore hard-coded di "- 20"? – citress

22

Oppure, per meno codice, all'interno del vostro click si inserisce:

setTimeout(function)({ $('#DIV_ID').scrollTop(0); }, 500); 
+0

Questo non funziona in jQuery 2.2.0. Ma la risposta con 116 voti lo fa. –

+0

Devi aggiungere un 'setTimeout' per farlo funzionare:' setTimeout (funzione) ({$ ('# DIV_ID'). ScrollTop (0);}, 500); ' –

+0

Grazie a Londra, modifico quindi, sembra che le cose siano cambiate –

1

Non so perché, ma si deve aggiungere un setTimeout con almeno per me 200ms:

setTimeout(function() {$("#DIV_ID").scrollTop(0)}, 200); 

testato con Firefox/Chrome/Edge.

0

utilizzare la seguente funzione

window.scrollTo(xpos, ypos) 

Qui xpos è richiesto. La coordinata per scorrere verso, lungo l'asse x (orizzontale), in pixel

ypos è richiesto anche. La coordinata per scorrere verso, lungo l'asse y (verticale), in pixel