Wrz
12
2013
12
2013
jQuery – Animowany scrolling na stronie www
Na wielu stronach możemy spotkać po kliknięciu w link gładkie przesuwanie ekranu góra/dół (scrolling), będąc na tej samej stronie. Tzw. gładkie przejście do wybranego fragmentu strony. Można to wykonać przy użyciu jQuery z funkcją animate(). Poniżej przykład.
Rozwiązanie
Umieszczamy dany fragment w sekcji HEAD strony pomiędzy znacznikami <script>...</script>.
|
1 2 3 4 5 6 7 8 9 |
$(function() { $('#link').click(function(){ // wskazujemy element/link, po kliknięciu którego następuje scrollowanie $('html').animate({ // funkcja animacji jest przypisana do ciała strony // argument scrollTop wskazuje na przejście do wybranego fragmentu liczonego od początku dokumentu // $('#cel').offset().top - pobiera odległość elementu "cel" w pikselach od górnej części dokumentu scrollTop: $('#cel').offset().top }, 1000); // ma wykonać animowane przejście w ciągu 1sek / 1000ms. }); }); |
Dodatkowe informacje
Opis użytych funkcji jQuery.
Tagi: jquery
Udostępnij:
Podobne tematy
jQuery – ToolTip + Image. Oznacz i opisz zdjęcie.
jQuery – Pobieranie pliku + Wysłanie danych przez Ajax
Odliczanie czasu wysyłki (timer) – skrypt jQuery + JavaScript
Autor wpisu: Arkadiusz Krakiewicz
Programista i właściciel sklepu jednocześnie, dzięki temu rozumie potrzeby osób prowadzących sprzedaż w internecie. Od 2006 związany z eCommerce. Zaczynał jako freelancer tworząc sklepy oraz strony www. Aktualnie zajmuje się: programowanie w PHP, Symfony 2, Android, PrestaShop, osCommerce, OpenCart, WordPress.
3 komentarze + Dodaj komentarz
Dodaj komentarz
O mnie
Arkadiusz Krakiewicz
Programista aplikacji webowych dla branży eCommerce. Jednocześnie jako właściciel sklepu zna od "podszewki" potrzeby osób prowadzących sprzedaż w internecie.
W swoich rozwiązaniach stawia na funkcjonalność i wydajność aplikacji pod kątem obsługi klienta.
Najnowsze wpisy
- Drzewo kategorii – budowa struktury od dołu do góry
- PHPExcel – export + import pliku XLS
- WordPress + Polylang – Tworzenie klasy CSS z ID strony/wpisu w wybranym języku
- Mailing – Poprawna konstrukcja szablonu maila HTML/CSS i prawidłowy wygląd w programie pocztowym
- Szukasz programisty PHP dla e-commerce?
Konkretnie i na temat. Stronka ląduje w ulubionych :)
Nie działa. Mam sekcję w dokumencie
W link wpisuje ‚#one ‚ a w cel co mam wpisać?
ID elementu, do którego ma przeskrolować stronę.
np: <div id=”cel”>…</div>