Mam kilka hiperłączy na mojej stronie. Często zadawane pytania, które użytkownicy przeczytają, gdy odwiedzą moją sekcję pomocy.
Za pomocą łączy zakotwiczenia mogę przewinąć stronę w kierunku zakotwiczenia i poprowadzić tam użytkowników.
Czy istnieje sposób na płynne przewijanie?
Ale zauważ, że używa niestandardowej biblioteki JavaScript. Może jQuery oferuje coś takiego upieczonego?
Odpowiedzi:
Aktualizacja kwietnia 2018 r .: Istnieje teraz natywny sposób :
Jest to obecnie obsługiwane tylko w najnowocześniejszych przeglądarkach.
W przypadku starszych przeglądarek możesz użyć tej techniki jQuery:
A oto skrzypce: http://jsfiddle.net/9SDLw/
Jeśli element docelowy nie ma identyfikatora i łączysz się z nim za pomocą
name
, użyj tego:Aby zwiększyć wydajność, należy buforować ten
$('html, body')
selektor, aby nie działał za każdym razem po kliknięciu kotwicy:Jeśli chcesz zaktualizować adres URL, zrób to w ramach
animate
wywołania zwrotnego:źródło
scrollTop: $(this.hash).offset().top
zamiastscrollTop: $(this.href).offset().top
?scrollTop: $(href).offset().top - 72
html, body
obiektu tutaj nie jest konieczne, uruchamianie selektora raz na kliknięcie nie jest aż tak duże.Prawidłowa składnia to:
Uproszczenie : OSUSZANIE
Wyjaśnienie
href*=\\#
:*
oznacza, że pasuje do tego, co zawiera#
char. Dlatego pasują tylko do kotwic . Więcej informacji na temat tego znaczenia znajduje się tutaj\\
to dlatego, że#
jest to specjalny znak w selektorze css, więc musimy przed tym uciec.źródło
$('a')
aby$('a[href*=#]')
podawać tylko adresy URL kotwicy<a href="javascript:$('#test').css('background-color', '#000')">Test</a>
. Powinieneś raczej użyć,$('a[href^=#]')
aby dopasować wszystkie adresy URL zaczynające się od znaku skrótu.a[href^=\\#]
Nowa popularność w CSS3. Jest to o wiele łatwiejsze niż każda metoda wymieniona na tej stronie i nie wymaga Javascript. Wystarczy wpisać poniższy kod w css, a wszystkie nagłe linki prowadzą do lokalizacji na twojej stronie będą miały płynną animację przewijania.
Następnie wszelkie linki wskazujące na div będą płynnie przesuwać się do tych sekcji.
Edycja: dla tych, którzy są zdezorientowani powyższym tagiem. Zasadniczo jest to link, który można kliknąć. Możesz mieć inny tag div gdzieś na swojej stronie internetowej, np
W związku z tym link będzie klikalny i przejdzie do dowolnego #section, w tym przypadku jest to nasz div, który nazwaliśmy sekcją.
BTW, spędziłem godziny próbując sprawić, żeby to zadziałało. Znalazłem rozwiązanie w jakiejś niejasnej sekcji komentarzy. To było błędne i nie działało w niektórych tagach. Nie działał w ciele. W końcu zadziałało, gdy wstawiłem go do html {} w pliku CSS.
źródło
to działało idealnie dla mnie
źródło
Dziwi mnie, że nikt nie opublikował natywnego rozwiązania, które zajmuje się także aktualizacją skrótu lokalizacji przeglądarki, aby pasował. Oto on:
Zobacz samouczek: http://www.javascriptkit.com/javatutors/scrolling-html-bookmark-javascript.shtml
W przypadku witryn z lepkimi nagłówkami
scroll-padding-top
można użyć CSS w celu zapewnienia przesunięcia.źródło
Tylko CSS
Wystarczy tylko dodać to. Teraz Twoje przewijanie wewnętrznych linków będzie płynne jak przepływ strumienia.
Uwaga : Wszystkie najnowsze przeglądarki (
Opera
,Chrome
,Firefox
etc) obsługuje tę funkcję.w celu szczegółowego zrozumienia przeczytaj ten artykuł
źródło
Proponuję zrobić ten ogólny kod:
Możesz zobaczyć bardzo dobry artykuł tutaj: jquery-effet-smooth-scroll-defilement-fluid
źródło
Oficjalny: http://css-tricks.com/snippets/jquery/smooth-scrolling/
źródło
Jest tu już wiele dobrych odpowiedzi - jednak wszyscy pomijają fakt, że należy wykluczyć puste kotwice . W przeciwnym razie skrypty generują błędy JavaScript, jak tylko kliknięta zostanie pusta kotwica.
Moim zdaniem poprawna odpowiedź jest następująca:
źródło
Za pomocą JQuery:
źródło
Istnieje natywna obsługa płynnego przewijania przewijanych identyfikatorów hash.
Możesz rzucić okiem: https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2
źródło
Podana odpowiedź działa, ale wyłącza linki wychodzące. Poniżej wersji z dodatkowym bonusem rozluźnienie (huśtawka) i szanuje linki wychodzące.
źródło
stop()
że okruch adresu URL nie działa zgodnie z oczekiwaniami: przycisk Wstecz nie przywraca, dzieje się tak, ponieważ gdy okruchy są ustawione w adresie URL po zakończeniu animacji. Lepiej jest bez okruchów w adresie URL, na przykład tak robi airbnb.HTML
lub z bezwzględnym pełnym adresem URL
jQuery
źródło
Nowoczesne przeglądarki są obecnie nieco szybsze. SetInterval może działać. Ta funkcja działa teraz dobrze w Chrome i Firefox. (Trochę powolny w safari, nie przeszkadzało to w IE)
źródło
Istnieje sposób CSS na wykonanie tego przy użyciu zachowania przewijania. Dodaj następującą właściwość.
I to jest to. Nie wymaga JS.
PS: sprawdź kompatybilność przeglądarki.
źródło
Dodanie tego:
w jakiś sposób niweluje przesunięcie pionowe
w Firefox i IE, ale nie w Chrome. Zasadniczo strona płynnie przewija się do punktu, w którym powinna się zatrzymać na podstawie przesunięcia, ale następnie przeskakuje w dół do miejsca, w którym strona poszedłaby bez przesunięcia.
Dodaje skrót na końcu adresu URL, ale naciśnięcie go wstecz nie zabierze Cię z powrotem na górę, po prostu usuwa skrót z adresu URL i pozostawia okno wyświetlania w miejscu, w którym się znajduje.
Oto pełny js, którego używam:
źródło
To rozwiązanie będzie działać również w przypadku następujących adresów URL, bez przerywania linków zakotwiczonych do różnych stron.
itp.
Nie przetestowałem tego jeszcze we wszystkich przeglądarkach.
źródło
Ułatwi to, że jQuery rozpoznaje twój docelowy skrót i wie, kiedy i gdzie zatrzymać.
źródło
źródło
Testowany i zweryfikowany kod
źródło
Zrobiłem to zarówno dla kotwic href „/ xxxxx # asdf”, jak i „#asdf”
źródło
Oto rozwiązanie, które wdrożyłem dla wielu linków i kotwic, dla płynnego przewijania:
http://www.adriantomic.se/development/jquery-localscroll-tutorial/ jeśli masz linki nawigacyjne skonfigurowane w div nawigacji i zadeklarowane za pomocą tej struktury:
oraz odpowiednie miejsca docelowe tagów zakotwiczenia:
Następnie po prostu załaduj to do nagłówka dokumentu:
Dzięki @Adriantomic
źródło
Jeśli masz prosty przycisk na stronie, aby przewinąć w dół do div i chcesz , aby przycisk Wstecz działał, przeskakując na górę, po prostu dodaj ten kod:
Można to rozszerzyć, aby przejść również do różnych div, czytając wartość skrótu i przewijając jak Joseph Silbers odpowiedzi.
źródło
Nigdy nie zapominaj, że funkcja offset () podaje pozycję elementu do udokumentowania. Więc kiedy potrzebujesz przewinąć swój element względem jego rodzica, powinieneś go użyć;
Kluczowym punktem jest pobranie scrollTop z scroll-div i dodanie go do scrollTop. Jeśli tego nie zrobisz, funkcja position () zawsze daje różne wartości pozycji.
źródło
Można korzystać
window.scroll()
zbehavior: smooth
itop
ustawiony na przesunięcie szczytu, który zapewnia, że znacznik kotwica będzie na górze rzutni w tagu zakotwiczenia za.Próbny:
Pokaż fragment kodu
Możesz po prostu ustawić właściwość CSS
scroll-behavior
nasmooth
(którą obsługuje większość współczesnych przeglądarek), co eliminuje potrzebę Javascript.Pokaż fragment kodu
źródło
dzięki za udostępnienie, Joseph Silber. Oto twoje rozwiązanie 2018 jako ES6 z niewielką zmianą, aby zachować standardowe zachowanie (przewiń do góry):
źródło
Wymaga jquery i animacji do zakotwiczenia tagu o określonej nazwie zamiast id, przy jednoczesnym dodawaniu skrótu do adresu URL przeglądarki. Naprawiono również błąd w większości odpowiedzi z jquery, w których znak # nie jest poprzedzony odwrotnym ukośnikiem. Niestety przycisk Wstecz nie nawiguje prawidłowo do poprzednich łączy mieszających ...
źródło