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.

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,

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