2010-03-03 13 views
30

Mam GridView wewnątrz div ... Chcę, aby przewinąć do góry div od dołu div przy użyciu jQuery ... Wszelkie sugestie ....Jak przejść do góry elementu div za pomocą jquery?

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

Moje GridView będzie miał zwyczaj paginacja generowane linkbuttons w nim ... będę przewinąć do góry div od dołu na przycisk łącza kliknięcia ...

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

w miejscu javascript ll wywołać funkcję jquery ... Wszelkie sugestie ...

EDIT:

Dokładnie jak StackOverflow pytania na stronie użytkownika ... Przy zmianie strony nos przewija do góry z gładkiego efektu .... Chcę acheive że ...

+0

Być może nie rozumiem, ale dlaczego nie używasz kotwic stron? –

Odpowiedz

6

mógłby po prostu użyć:

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

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

Nie potrzebujesz kotwic. Po prostu przejdź do #GridDiv. –

+30

+1 za technicznie genialne rozwiązanie problemu użytkownika ... ale całkowicie bezużyteczne dla każdego, kto szuka odpowiedzi na faktyczne pytanie. (Zakotwiczenia NIE rozwiązują mojego problemu, muszę przewinąć ekran do góry div używając javascript! - Narzekając, ponieważ był to dla mnie najlepszy wynik w Google) – RonLugge

+0

@RonLugge W takim przypadku odpowiedź Grega Mathewsa może pomóc. Spróbuj ustawić lub animować właściwość 'scrollTop'. –

148

Oto co można zrobić przy użyciu 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

niesamowite, że powinieneś zdobyć 100 przegranych. – Prateek

+0

To jest idealne. – BaconJuice

+2

Dlaczego istnieje zakodowana wartość "- 20"? – citress

22

Albo na mniej kodu, wewnątrz kliknięciem umieścić:

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

To nie działa w jQuery 2.2.0. Ale odpowiedź zawiera 116 głosów. –

+0

Musisz dodać 'setTimeout', aby działał:' setTimeout (function) ({$ ('# DIV_ID') scrollTop (0);}, 500); ' –

+0

Dzięki London, będę edytować, Wygląda na to, że rzeczy się zmieniły –

1

Nie wiem dlaczego, ale trzeba dodać setTimeout z przynajmniej dla mnie 200ms:

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

Testowane z Firefox/Chrome/EDGE.

0

Poniższa funkcja

window.scrollTo(xpos, ypos) 

Tutaj xpoz jest wymagane. Współrzędne do przewijania, wzdłuż osi X (poziomo), w pikselach:

ypos jest również wymagany. Współrzędne do przewijania, wzdłuż osi Y (pionowe), w pikselach

Powiązane problemy