Jak przewijać okno za pomocą funkcji JQuery $ .scrollTo ()

98

Próbuję przewijać w dół o 100 pikseli za każdym razem, gdy użytkownik zbliża się do początku dokumentu.

Mam funkcję wykonywaną, gdy użytkownik zbliża się do początku dokumentu, ale funkcja .scrollTo nie działa.

Ustawiłem alert przed i przed, aby sprawdzić, czy to rzeczywiście była linia, czy nie, która go zatrzymywała i tylko pierwszy alert się wyłącza, oto kod:

alert("starting");
$.scrollTo({ top: '+=100px', left: '+=0px' }, 800);
alert("finished");

Wiem, że mam poprawnie link do strony jquery, ponieważ używam wielu innych funkcji jquery i wszystkie działają dobrze. Próbowałem też usunąć „px” z góry i nie robi to różnicy.

javascript jquery scroll scrollto
źródło
3
Samo Jquery działa dobrze, ale czy na pewno masz poprawnie podłączoną wtyczkę scrollTo? Zmień jeden z tych alertów na alert ($. ScrollTo);
Andrew,

Odpowiedzi:

97

Jeśli to nie działa, dlaczego nie spróbujesz użyć metody scrollTop jQuery? 

$("#id").scrollTop($("#id").scrollTop() + 100);

Jeśli chcesz płynnie przewijać, możesz użyć podstawowej funkcji setTimeout / setInterval języka JavaScript, aby przewijać w krokach co 1 piksel przez określony czas.

Fermin
źródło
8
Zauważ, że jeśli chcesz przewinąć całą stronę, a nie pojedynczy element, użyj $ ('html, body'), tak jak wskazał tutaj Tim . Tylko $ ('body') nie będzie działać we wszystkich przeglądarkach.
I--
321 
$('html, body').animate({scrollTop: $("#page").offset().top}, 2000);
Mihai
źródło
19
Często się zastanawiałem, dlaczego ludzie używają „html, body” dla scrollTop zamiast tylko „html”. Jakieś przemyślenia na ten temat?
Scott Greenfield
+1 zadziałało dla mnie;) Interesuje mnie też, dlaczego html, bodyzamiast tylko html?
Kato
9
@ScottGreenfield, @Kato: nie wiem dlaczego, ale ten komentarz mówi, że brak w tym bodyprzerywa to w Chrome 4: stackoverflow.com/questions/1890995/ ...
Yuji 'Tomita' Tomita
scrollTop: 0działa również dobrze. Ale czas trwania skraca się. Działa dobrze, jeśli ustawisz prędkość 1000
shashwat Kwietnia
Jest to dobre rozwiązanie, dopóki nie chcesz dodać pełnej metody - zostanie wykonana dwukrotnie. Rozwiązanie @complistic jest bardziej eleganckie i zapobiegnie temu.
plankguy
41

jQuery obsługuje teraz scrollTop jako zmienną animacji.

$("#id").animate({"scrollTop": $("#id").scrollTop() + 100});

Nie musisz już ustawiaćTimeout / setInterval, aby płynnie przewijać.

Todd
źródło
Wystąpiło kilka błędów składniowych - brakuje kodu zamykającego {. W przeciwnym razie jest to dobra uwaga.
Joshua
1
Powinien być $("#id").offset().topzamiast tego?
codeulike
15

Aby obejść problem z htmlvs body, naprawiłem to, nie animując bezpośrednio css, ale raczej wzywając window.scrollTo();każdy krok:

$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

Działa to ładnie bez żadnych problemów z odświeżaniem, ponieważ używa JavaScript w różnych przeglądarkach.

Zajrzyj na http://james.padolsey.com/javascript/fun-with-jquerys-animate/, aby uzyskać więcej informacji na temat tego, co możesz zrobić z funkcją animacji jQuery.

skomplikowany
źródło
1
To jest genialne. Zmieniłem tylko window.pageYOffsetna $(window).scrollTop()i window.scrollTo(0, val)na, $(window).scrollTop(val)więc nie muszę się martwić o zgodność przeglądarki.
leftclickben
1
Nigdy nie myślałem o przekazaniu obiektu do animowanej metody jQuery w ten sposób. Tak wiele możliwych zastosowań. To świetne rozwiązanie, dziękuję.
Synexis,
Tak, technika to znaczący wkład. Wcześniej omijano problemy z przeglądarką przez bezpośrednie użycie „window.scrollTo ()”, ale to nie pozwala na „pełne” oddzwonienie ani na obietnicę. Dziękuję @complistic za to rozwiązanie. Dziękuję również @leftclickben; Zaimplementowałem jego odmianę za pomocą ".scrollTop ()". Ponadto artykuł „james.padolsey”, za pośrednictwem linku, jest zwięzły, bardzo warty przeczytania.
IAM_AL_X
Myślę, że "window.scrollTo ()" powinno być kompatybilne ze wszystkimi nowoczesnymi przeglądarkami.
IAM_AL_X
7

Wygląda na to, że masz trochę błędną składnię ... Zakładam na podstawie twojego kodu, że próbujesz przewinąć w dół o 100 pikseli w 800 ms, jeśli tak, to działa (używając scrollTo 1.4.1):

$.scrollTo('+=100px', 800, { axis:'y' });
Alconja
źródło
6

Właściwie coś takiego

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top +
 parseInt($("#"+prop).css('padding-top'),10) },'slow');
}

będzie ładnie działać i wspierać wyściółkę. Możesz również łatwo obsługiwać marginesy - szczegóły znajdziesz poniżej

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top 
+ parseInt($("#"+prop).css('padding-top'),10) 
+ parseInt($("#"+prop).css('margin-top'),10) +},'slow');
}
Tim
źródło