To już kolejne odświeżenie tematu płynnego przewijania strony. Wcześniejsze dwie wersje jednego z bardziej popularnych wpisów na blogu opierały się na JavaScript. Lata minęły i można już śmiało użyć w tym celu możliwości czystego CSSa. Co prawda, nie wszędzie poniższy przykład zadziała, jednak pomijanie Internet Explorera stało się wreszcie upragnionym standardem ;-)
Cały czas można wesprzeć się awaryjnie JavaScriptem, ten temat zwięźle opisał u siebie WebKrytyk.
TL;DR
Po prostu użyj:
1 2 3 | html, body { scroll-behavior: smooth; } |
A poniżej przykład działania
Płynne przewijanie strony – smooth scrolling
Jak uzyskać efekt „smooth scrolling”?
Zasada działania jest prosta i wykorzystuje HTMLowe kotwice.
1 2 3 4 5 | <ul> <li><a href="#one">First chapter</a></li> <li><a href="#two">Second chapter</a></li> <li><a href="#three">Third chapter</a></li> </ul> |
Odnośnik przenosi użytkownika do zdefiniowanego identyfikatorem elementu HTML.
1 2 3 4 5 6 | <section id="one"> <h1>First chapter</h1> <article> <p>Lorem Ipsum...</p> </article> </section> |
Cała akcja domyślnie odbywa się niestety dość ascetycznie (pewnie się o tym przekonałeś, skoro szukasz ładniejszego rozwiązania). Poniższy kod pomoże uzyskać bardziej płynny efekt przewinięcia. Po prostu dodaj do swojego arkusza CSS następujący kod:
1 2 3 | html, body { scroll-behavior: smooth; } |
Działanie „smooth scrolling” w praktyce
Płynne przewijanie strony – smooth scrolling
Tagi: kotwice • płynne przewijanie • scroll behavior • smooth • smooth scrolling
Spoko art! Podoba mi się. Właśnie tego szukałem. Jak wspominasz w arcie oszczędzam mi nim przekopywanie neta szukając odpowiednich rozwiązań. Pozdro.
Niestety ale u mnie to nie zadziałało, skok jest a nie płynne przewinięcie. Instrukcja świetnie napisana, ,wszystko jest proste i jasne lecz coś mi się nie udało
a zrobiłeś wszystko dokładnie? bo to działa
dodaj to na górę stonki gdzieś:
przykładowy tekst
to na dole:
Zabierz mnie na górę!
a to w „”:
– tylko pobierz z tąd
http://code.jquery.com/jquery-1.7.2.min.js
a zamień że z linka co u góry zamiast z np. twojego serwera, dysku ;)
skrypt w głowie strony ;p sorrki
Mam z tym problem. skrypt wykorzystałem do nawigacji w menu strony…działa ale: po pierwszym kliknięciu skacze do kotwic, drugi raz kliknięcie w ten sam link powoduje płynne przejście do kotwicy. Nie bardzo wiem co jest nie tak….proszę o sugestię.
Sugeruję założyć temat na naszym forum.
Podaj tam kod – może coś pomożemy
wszystko działa bardzo dobrze, ale czy jest możlowość aby strona przewijała sie płynnie w poziomie ?
Jest możliwe :-) Miałem to nawet kiedyś wykorzystane na moim portfolio. Tyle, że musisz nadać wartość width dla tagu .
mógłbym Cie prosić o więcej informacji, podpowiedzi, może na maila [email protected] ( tak będzie najprościej ) dziękuje z góry. Uratuje to koncepcje mojej www :)
Zapraszam do utworzenia odpowiedniego wątku na naszym forum. W komentarzach nie rozwiązujemy poszczególnych problemów :-)
Jakbym nie wpisywał i ustawiał, przy rejestracji na forum wyskakuje błąd:
ReCAPTCHA Text Error.
?
Problem został naprawiony. Można się rejestrować. SSL blokował niektóre funkcje przy rejestracji.
Bardzo fajnie to wszystko działa. A czy da się to jakoś zmodyfikować by działało dla podstron? Tj. klikamy w link otwiera się nam nowa podstrona (która jest de facto długa) i tam na niej następuje płynne przewinięcie do danego elementu? Dziękuję za odpowiedź pozdrawiam
Zapraszam na nasze forum webmasterskie. Razem poszukamy rozwiązania. Pozdrawiam.
Podbijam pytanie , a na forum nie ma śladu po tym temacie
Na dniach zaktualizuję ten wpis do obecnych realiów. Miejmy na uwadze to, że post został opublikowany w 6 lat temu.
…skrypt dziala ale jesli masz jakikolwiek inny js na stronie, to najprawdopodobniej przewijanie nie zadziala bo jest tak fatalnie napisane, ze konfliktuje sie z innym badziewiem pisanym w js. Kolega ktory skopiowal skrypt do artykulu napewno mial dobre checi.
Stwierdzam że mechanizm nie działa. Próbowałem na wiele sposobów.
Dobrze opisane i można spokojnie zastosować, ale o ile działa w FF, to niestety nie dla Chroma i innych przeglądarek. Jakieś rozwiązanie? Jakaś podpowiedź?
Wpis ma ponad dwa lata, dlatego może być nieaktualny. Dziękuję za informację. Przygotuję coś dostosowanego do obecnych realiów. Pozdrawiam
Wpis bardzo fajnie przygotowany :)
Znalazłam opinię, że Chrom „gubi się” w kwestii Parent. Niestety znalezione porady nie pomogły mi w rozwiązaniu problemu…
Jest możliwość wykorzystania tego w Joomli 3.0? Próbowałem wrzucić wszystko do index.php w szablonie którego używam, skrypty do folderu z szablonem, no i zainstalowałem jQuery Easy (bo podobno jQuery się gryzie z Mootools), ale bez efektów. Nie da się czy ja coś robię nie tak?
Cześć, elementy umieszczasz w pliku index.php szablonu a biblioteki umieszczasz w głównym katalogu strony. Oczywiście jeśli nie chcesz zmieniać przekładowej ścieżki
src=”jquery.scrollTo.js
Działa na Joomli 3.
Pozdrawiam
czy joomla, drupal czy cokolwiek, nie ma znaczenia kod jest kod i będzie działać odpowiednio umieszczony.
pod joomlą mogą dojśćkonfilkty skryptów, jednak dzięki za rozwiązanie dodałbym jeszcze do tego easing: np. $.localScroll({duration:500, easing: 'easeOutExpo’});
jak zmienić szybkość przewijania?
Żeby przewijanie trwało 0,5s (500ms):
$.localScroll({
duration:500
});
Po więcej odsyłam na https://github.com/flesler/jquery.localScroll
Tego właśnie szukałem. Mam jednak mały problem z umieszczeniem kilku kotwic. Oczywiście każda kolejna ma inną nazwę ID. Odnośnik z menu poprawnie działa jednak tylko do pierwszej kotwicy. Kotwice rozmieszczone są co kilkadziesiąt linijek. Gdy kliknę na drugą strona przejeżdża tylko kilka linijek. W czym może być problem?
Wszystko pięknie działa, tutorial prosty i zrozumiały ale… jak ustawić aby tekst kotwiczony nie był podsunięty do góry strony ale miał dodatkowy margines?
Załóż proszę wątek na forum. Przedstaw swój kod i spróbujemy jakoś pomóc.
Super wszystko działa ;) Polecam
A jak zrobić aby działało to w momencie przejścia ze strony głównej do np. kontakt? Skrypt działa tylko jeżeli jestem na tej samej podstronie i przewinę ją do góry – wówczas po kliknięciu w menu podjedzie do nagłówka strony. Jednak w momencie kiedy chce przeskoczyć na inna podstronę, dana podstrona się ładuje ale już bez efektu i od razu pokazuje nagłówek.
Podłączyłem wszystko do strony jak należy, pliki .js na bank są widoczne z poziomu pliku index, jednak po kliknieciu w którąkolwiek kotwicę, konsola wywala mi błąd:
„TypeError: d.browser is undefined”
Proszę załóz temat na forum – tam zajmujemy się takimi sprawami.
czy możesz pokazać na jakimś przykładzie jak wygląda taka strona z takim rozwiązaniem ?
witam jak zrobic, zeby sekcja nie przewijala sie do poczatku strony tylko pod menu? hm hm?
Znalazłem u Ciebie to czego szukałem ale mam problem, strona się nie przewija tylko od razu przeskakuje do wubranego miejsca;/ Tylko czy to działa też do DIVów? Mam menu Odnosnik div1, potem mam diva do którego chce sie odnieść potem mam wklejony kod z funkcji jQuery. Ale nie ma efektu przewijania tylko jest przeskok;/ Czy coś zrobiłem źle?;/
Również mam ten problem – chętnie poznam odp na to pytanie :)
Witajcie. Jesli chcecie przewinąć płynnie do wybranego div’a to poprostu tuż nad linia np. dopiszcie
Wszystko ładnie działa. Dzieki ;)
Ale jaja, działa skrycik, prosty i wygodny, nawet dwa w jednym tu są
nie działa pod operą ale pod ff działa… jakieś pomysły?
Wpis wymaga aktualizacji, od 2011 sporo czasu minęło. Zajmę się tym w nadchodzącym tygodniu.
dziękuję za odpowiedź:-)
pozdrawiam
Super blog! :)
Dzięki! :)
Nie działa pod ff. Pod edge i chrome bez problemu. Może kolidować z bootstrap data-spy=”scroll”?
Też miałam ten problem. Wystarczyło zmienić w script część $(’body’).animate({
na $(’body,html’).animate({
Mi śmiga, pozdrawiam i dziękuję autorowi bloga za wpis, przydatna sprawa :)
Dzięki Twoja podpowiedź była pomocna. wreszcie działa. Pozdrawiam.
Nie działa w Chrome 61. Ogólnie widzę, że sporo w tym błędów, może warto wprowadzić poprawki do demo? :)
Kod działa, moja strona przewija się płynnie. Dzięki za super artykuł ale..inne znaczniki „a href” przestały działać! Np. odsyłacze <a href="mailto:
Jakaś podpowiedź?
To powinno zadziałać.
$(document).on(’click’, 'a[href^=”#”]’, function (event) {
event.preventDefault();
$(’html, body’).animate({
scrollTop: $($.attr(this, 'href’)).offset().top
}, 800);
});
Bardzo przydatne rozwiązanie, które często dopełnia efektu wizualnego danej strony. Obserwuje tego bloga i bardzo chętnie czytam kolejne wpisy! Pozdrawiam!
Trochę się uprościło :-)
Działa ale gdy mam guzik na stronie powrotu do góry i klikam go to jakby się z tym kłóci i reaguje dopiero po chwili. Jest jakieś rozwiązanie?
Czy ten przycisk powrotu w górę jest również obsługiwany przez smooth-scroll? Czy on działa dzięki JavaScript? Najlepiej podrzuć kod strony to wglądu.