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
Podobne tematy
3 komentarze + Dodaj komentarz
Dodaj komentarz
O mnie
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>