Ta funkcja działa dobrze. Przewija treść do żądanego przesunięcia kontenera
function scrolear(destino){
var stop = $(destino).offset().top;
var delay = 1000;
$('body').animate({scrollTop: stop}, delay);
return false;
}
Ale nie w przeglądarce Firefox. Czemu?
-EDYTOWAĆ-
Aby obsłużyć de double trigger w zaakceptowanej odpowiedzi, proponuję zatrzymać element przed animacją:
$('body,html').stop(true,true).animate({scrollTop: stop}, delay);
Odpowiedzi:
Firefox umieszcza przepełnienie na
html
poziomie, chyba że ma specjalny styl, aby zachowywać się inaczej.Aby to działało w przeglądarce Firefox, użyj
Przykład roboczy
Rozwiązaniem CSS byłoby ustawienie następujących stylów:
Przypuszczam, że rozwiązanie JS będzie najmniej inwazyjne.
Aktualizacja
Wiele poniższych dyskusji skupia się na fakcie, że animowanie
scrollTop
dwóch elementów spowodowałoby dwukrotne wywołanie wywołania zwrotnego. Zaproponowano, a następnie wycofano funkcje wykrywania przeglądarki, a niektóre z nich są prawdopodobnie dość naciągane.Jeśli wywołanie zwrotne jest idempotentne i nie wymaga dużej mocy obliczeniowej, dwukrotne wystrzelenie go może całkowicie nie stanowić problemu. Jeśli wielokrotne wywołania wywołania zwrotnego są naprawdę problemem i jeśli chcesz uniknąć wykrywania funkcji, prostsze może być wymuszenie, aby wywołanie zwrotne było uruchamiane tylko raz z poziomu wywołania zwrotnego:
źródło
$(jQuery.browser.webkit ? "body": "html").animate(...);
$(jQuery.browser.mozilla ? "html" : "body").animate(...);
. Byłoby wspaniale nie używać węszenia przeglądania, ale wykrywania funkcji. Nie jestem jednak pewien, jak wykonać wykrywanie funkcji w CSSjQuery.browser
jest przestarzały i brakuje go w najnowszej wersji jQuerywindow.scroll
nie animuje. Możesz oczywiście toczyć swoje własne rzeczy z przerwami iscrollBy
. Jeśli chcesz dodać do tego łagodzenie, nagle masz dużo kodu do napisania dla raczej drugorzędnego aspektu produktu.Wykrywanie funkcji, a następnie animowanie na pojedynczym obsługiwanym obiekcie byłoby fajne, ale nie ma rozwiązania opartego na jednej linii. W międzyczasie, oto sposób na użycie obietnicy do wykonania pojedynczego wywołania zwrotnego na wykonanie.
AKTUALIZACJA: Oto, jak można zamiast tego użyć wykrywania funkcji. Ten fragment kodu musi zostać oceniony przed wywołaniem animacji:
Teraz użyj zmiennej, którą właśnie zdefiniowaliśmy jako selektor animacji przewijania strony, i użyj zwykłej składni:
źródło
html
a czasami wracabody
. Oto mój kod po zadeklarowaniu funkcjivar scrollTopElement; setTimeout( function() { scrollTopElement = getScrollTopElement(); console.log(scrollTopElement); }, 1000);
Dziękuję za to, ale rozwiązał mój problem.html
zamiastbody
tak, jak powinien. Dzieje się tak tylko wtedy, gdy przewiniesz całą stronę w dół i przeładujesz, w przeciwnym razie to działa.Spędziłem całe wieki, próbując zrozumieć, dlaczego mój kod nie działa -
Problem był w moim CSS -
auto
Zamiast tego ustawiłem go na (i martwiłem się, dlaczego jest ustawiony na100%
na pierwszym miejscu). To naprawiło to dla mnie.źródło
Możesz uniknąć tego problemu, używając wtyczki - a dokładniej mojej wtyczki :)
Poważnie, mimo że podstawowy problem już dawno został rozwiązany (różne przeglądarki używają różnych elementów do przewijania okien), istnieje kilka nietrywialnych problemów, które mogą Cię zaskoczyć:
body
ihtml
ma swoje problemy ,Jestem oczywiście stronniczy, ale jQuery.scrollable jest w rzeczywistości dobrym wyborem do rozwiązania tych problemów. (W rzeczywistości nie znam żadnej innej wtyczki, która obsługuje je wszystkie).
Ponadto, można obliczyć pozycję docelową - ten, który wskażesz - w kuloodporną sposób z tej
getScrollTargetPosition()
funkcji w tym GIST .Wszystko to zostawiłoby cię z
źródło
Uważaj na to. Miałem ten sam problem, ani przeglądarka Firefox, ani Explorer z przewijaniem
Więc użyłem tak, jak powiedział David
Świetnie zadziałało, ale nowy problem, ponieważ są dwa elementy, body i html, funkcja jest wykonywana dwa razy, to znaczy X działa dwa razy.
próbowano tylko z „html”, a Firefox i Explorer działają, ale teraz Chrome tego nie obsługuje.
Tak potrzebne body dla Chrome i HTML dla Firefoksa i Explorera. Czy to błąd jQuery? nie wiem.
Uważaj tylko na swoją funkcję, ponieważ będzie działać dwukrotnie.
źródło
Polecam nie opierając się
body
anihtml
jako bardziej przenośne rozwiązanie. Po prostu dodaj w treści element div, który ma zawierać przewijane elementy i nadaj mu styl, aby umożliwić przewijanie w pełnym rozmiarze:(zakładając, że
display:block;
itop:0;left:0;
są domyślne, który pasuje do celu), a następnie użyć$('#my-scroll')
dla animacji.źródło
To jest prawdziwa okazja. Działa bezbłędnie w Chrome i Firefox. To nawet smutne, że niektórzy ignoranci odrzucają mnie. Ten kod dosłownie działa doskonale, tak jak we wszystkich przeglądarkach. Wystarczy, że dodasz link i umieścisz id elementu, który chcesz przewinąć w href i działa on bez określania czegokolwiek. Czysty i niezawodny kod wielokrotnego użytku.
źródło
Niedawno napotkałem ten sam problem i rozwiązałem go, wykonując następujące czynności:
I youpi !!! działa na wszystkich przeglądarkach.
w przypadku, gdy pozycjonowanie nie jest poprawne, możesz w ten sposób odjąć wartość od offset () .top
źródło
Dla mnie problem polegał na tym, że Firefox automatycznie przeskoczył do kotwicy z atrybutem nazwy takim samym jak nazwa skrótu, którą umieściłem w adresie URL. Mimo że wstawiłem .preventDefault (), aby temu zapobiec. Więc po zmianie atrybutów nazwy, firefox nie przeskoczył automatycznie do zakotwiczeń, ale poprawnie wykonał animację.
@Toni Przepraszamy, jeśli to nie było zrozumiałe. Rzecz w tym, że zmieniłem skróty w adresie URL, na przykład www.someurl.com/#hashname. Wtedy miałem na przykład kotwicę podobną
<a name="hashname" ...></a>
do, do której jQuery ma przewijać się automatycznie. Ale tak się nie stało, ponieważ przeskoczył bezpośrednio do kotwicy z pasującym atrybutem nazwy w przeglądarce Firefox bez żadnej animacji przewijania. Kiedy zmieniłem atrybut nazwy na coś innego niż nazwa skrótu, na przykład naname="hashname-anchor"
, przewijanie zadziałało.źródło
Dla mnie było to unikanie dodawania ID w momencie animacji:
Unikanie:
Przygotowując identyfikator wcześniej i robiąc to:
Naprawiono w FF. (Dodatki CSS nie zrobiły dla mnie różnicy)
źródło
Mam nadzieję, że to zadziała.
źródło