Jak przewinąć do góry strony za pomocą JavaScript? Jest to pożądane, nawet jeśli pasek przewijania natychmiast przeskakuje na górę. Nie szukam płynnego przewijania.
javascript
scroll
KingNestor
źródło
źródło
Odpowiedzi:
Jeśli nie potrzebujesz zmiany do animacji, nie musisz używać żadnych specjalnych wtyczek - po prostu użyję natywnego okna JavaScript. ScrollTo - przekazanie 0,0 spowoduje natychmiastowe przewinięcie strony w lewy górny róg .
Parametry
źródło
window.scrollTo(0, document.body.scrollHeight);
Jeśli chcesz płynne przewijanie, spróbuj czegoś takiego:
Spowoduje to zabranie dowolnego
<a>
znacznikahref="#top"
i sprawi, że będzie płynnie przewijać do góry.źródło
window.pageYOffset
byłby własnością obiektu e̶l̶e̶m̶e̶n̶t̶ okna.Spróbuj przewinąć na górze
źródło
Lepsze rozwiązanie z płynną animacją:
Odniesienie: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example
źródło
ScrollOptions
(dla niektórych przeglądarek): github.com/iamdustan/smoothscrollAby to zrobić, nie potrzebujesz jQuery. Wystarczy standardowy tag HTML ...
źródło
Wszystkie te sugestie sprawdzają się doskonale w różnych sytuacjach. Dla tych, którzy znaleźli tę stronę poprzez wyszukiwania, można również dać to spróbować. JQuery, brak wtyczki, przewiń do elementu.
źródło
płynne przewijanie, czysty javascript:
źródło
Edytować:
Kolejny sposób przewijania z górnym i lewym marginesem:
źródło
animate
funkcji, zamiast tego należy użyć:$('html, body').animate({scrollTop:(scroll_pos)}, 2000);
w html
źródło
Naprawdę dziwne: to pytanie jest aktywne od pięciu lat i nadal nie ma waniliowej odpowiedzi JavaScript na animację przewijania… Więc proszę:
Jeśli chcesz, możesz zawinąć to w funkcję i wywołać to za pomocą
onclick
atrybutu. Sprawdź to jsfiddleUwaga: jest to bardzo podstawowe rozwiązanie, a może nie najskuteczniejsze. Bardzo rozbudowany przykład można znaleźć tutaj: https://github.com/cferdinandi/smooth-scroll
źródło
Jeśli chcesz płynnie przewijać, spróbuj tego:
Innym rozwiązaniem jest metoda JavaScript window.scrollTo:
Parametry:
źródło
Z
window.scrollTo(0, 0);
jest bardzo szybki,więc wypróbowałem przykład Marka Ursino, ale w Chrome nic się nie dzieje
i znalazłem to
przetestowałem wszystkie 3 przeglądarki i działa,
używam blueprint css,
gdy klient kliknie przycisk „Zarezerwuj teraz” i nie ma wybranego okresu wynajmu, powoli przechodzi na górę, gdzie znajdują się kalendarze, i otwiera okno dialogowe wskazujące na 2 pola, po 3 sekundach zanika
źródło
Dużo od użytkowników zalecamy wybranie zarówno HTML i ciała tagi dla kompatybilności z różnymi przeglądarkami, tak jak poniżej:
Może to Cię jednak potknąć, jeśli liczysz, że oddzwonienie uruchomi się tylko raz. W rzeczywistości będzie działał dwukrotnie, ponieważ wybrałeś dwa elementy.
Jeśli jest to dla Ciebie problem, możesz zrobić coś takiego:
Powodem tego jest to, że Chrome
$('html').scrollTop()
zwraca 0, ale nie w innych przeglądarkach, takich jak Firefox.Jeśli nie chcesz czekać na zakończenie animacji w przypadku, gdy pasek przewijania znajduje się już u góry, spróbuj tego:
źródło
Stare
#top
mogą załatwić sprawęDziała dobrze w FF, IE i Chrome
źródło
źródło
Spróbuj tego
źródło
$(document).scrollTop(0);
działa również.źródło
Rozwiązanie inne niż jQuery / czysty JavaScript:
źródło
To zadziała:
window.scrollTo(0, 0);
źródło
Wypróbuj ten kod:
div => Dom Element, w którym chcesz przenieść przewiń.
czas => milisekundy, określ szybkość przewijania.
źródło
Dlaczego nie używasz wbudowanej funkcji JQuery scrollTop:
Krótko i prosto!
źródło
Nie potrzebujesz JQuery. Po prostu możesz wywołać skrypt
po kliknięciu przycisku „Idź na górę”
Przykładowe demo:
output.jsbin.com/fakumo#
PS: Nie używaj tego podejścia, gdy korzystasz z nowoczesnych bibliotek, takich jak angularjs. To może zepsuć mieszanie adresów URL.
źródło
Po prostu użyj tego skryptu, aby przewinąć do góry bezpośrednio.
źródło
Rozwiązanie Pure JavaScript:
Piszę animowane rozwiązanie na Codepen
Możesz także wypróbować inne rozwiązanie z
scroll-behavior: smooth
właściwością CSS .źródło
Jeśli nie chcesz płynnego przewijania, możesz oszukiwać i zatrzymywać płynne przewijanie animacji niemal natychmiast po uruchomieniu ... tak:
Nie mam pojęcia, czy jest to zalecane / dozwolone, ale działa :)
Kiedy tego użyjesz? Nie jestem pewien, ale może kiedy chcesz użyć jednego kliknięcia do animacji jednej rzeczy za pomocą Jquery, ale zrobić inną bez animacji? tzn. otwórz wsuwany panel logowania administratora u góry strony i od razu przeskocz na górę, aby go zobaczyć.
źródło
Motywacja
To proste rozwiązanie działa natywnie i zapewnia płynne przewijanie do dowolnej pozycji.
Unika używania linków zakotwiczonych (tych z
#
), które moim zdaniem są przydatne, jeśli chcesz utworzyć link do sekcji, ale w niektórych sytuacjach nie są tak wygodne, szczególnie gdy wskazuje się na górę, co może prowadzić do dwóch różnych adresów URL wskazujących na ta sama lokalizacja ( http://www.example.org i http://www.example.org/# ).Rozwiązanie
Umieść identyfikator w tagu, do którego chcesz przewinąć, na przykład w pierwszej sekcji , która odpowiada na to pytanie, ale identyfikator można umieścić wszędzie na stronie.
Następnie jako przycisk możesz użyć linku, po prostu edytuj atrybut onclick za pomocą takiego kodu.
Gdzie argumentem
document.getElementById
jest identyfikator znacznika, który chcesz przewinąć po kliknięciu.źródło
Możesz po prostu użyć celu z linku, takiego jak #someid, gdzie #someid jest identyfikatorem div.
Możesz też użyć dowolnej liczby przewijanych wtyczek, które uczynią to bardziej eleganckim.
http://plugins.jquery.com/project/ScrollTo jest przykładem.
źródło
Możesz spróbować użyć JS jak w tym Fiddle http://jsfiddle.net/5bNmH/1/
Dodaj przycisk „Idź na górę” w stopce strony:
źródło
źródło
Żadna z powyższych odpowiedzi nie będzie działać w programie SharePoint 2016.
Należy to zrobić w następujący sposób: /sharepoint/195870/
źródło