Przycisk do płynnego przewijania na górę strony


2 maja 2012 / Michał Kortas


Wyobraźmy sobie sytuację, że menu na naszej witrynie znajduje się na samej górze strony. Odwiedzający nas internauta przegląda interesującej go treści, więc przewija okno przeglądarki coraz niżej. Kiedy znalazł – bądź nie – informacje, których szukał, chce wrócić do menu, żeby przejść do innego działu/podstrony/kategorii. Zaczyna przewijać scroll w swojej myszce, co bywa bardzo czasochłonnym zajęciem, szczególnie jeśli strona zawiera znaczną ilość treści. W tym poradniku przygotujemy sobie przycisk, który będzie wyświetlać się zawsze u dołu ekranu, a jego kliknięcie spowoduje przeniesienie się na samą górę naszej witryny. Nie traćmy więc czasu. Zapraszam do lektury.

Dla lepszego zrozumienia przygotowałem demo, które zobrazuje nam cały problem. Za chwilę tak edytujemy kod, aby wyświetlał się nam w/w przycisk. Na tę chwilę nasza strona wygląda w ten sposób > PRZYKŁAD 1.

Przygotujmy sobie graficzny obrazek ze strzałką. Jeśli nie macie czasu, możecie wykorzystać mój.

Grafikę wstawiamy do katalogu ze stroną.

Pobieramy pliki skryptu jQuery, które potem również przenosimy do katalogu strony.

Paczka z plugin’ami do jQuery potrzebnymi w tym artykule do pobrania tutaj:
Pobierz: jquery.scrollTo.js i jquery.localscroll.js

Teraz musimy edytować kod HTML i CSS naszej witryny. W pierwszej kolejności zajmijmy się plikiem index.htm (lub index.html/index.php). W sekcji HEAD dodajemy poniższe linijki listingu:

Znacznik

zamieniamy na:

Tuż za otwarciem znacznika BODY dodajemy ten krótki skrypt:

Na koniec, u samego dołu witryny (przed zamknięciem znacznika BODY), wstawiamy link w postaci:

Teraz musimy dodać jedynie odpowiednie instrukcje do naszego arkusza stylów CSS. Formatujemy tylko ten znacznik, który dodaliśmy na dole strony:

Wszystko mamy już gotowe. Spójrzmy na efekt końcowy > PRZYKŁAD 2.
Dla chętnych przygotowałem paczkę ZIP do pobrania > Pobierz DEMO.

Wszelkie pytania, komentarze i opisy problemów proszę zostawiać tylko i wyłącznie w komentarzach pod niniejszym artykułem.



3 odpowiedzi na “Przycisk do płynnego przewijania na górę strony”

  1. Fenu pisze:

    Bardzo przydatny bajer. Jest możliwość aby button pojawiał się jak już trochę się przewinie w dół strony?

  2. lubus pisze:

    a dla iWeb???

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *