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:
1 2 3 | <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="jquery.scrollTo.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.localscroll.js" type="text/javascript" charset="utf-8"></script> |
Znacznik
1 | <body> |
zamieniamy na:
1 | <body id="scroll"> |
Tuż za otwarciem znacznika BODY dodajemy ten krótki skrypt:
1 2 3 4 5 | <script type="text/javascript"> $(document).ready(function() { $.localScroll(); }); </script> |
Na koniec, u samego dołu witryny (przed zamknięciem znacznika BODY), wstawiamy link w postaci:
1 | <a id="bottom" href="#top"></a> |
Teraz musimy dodać jedynie odpowiednie instrukcje do naszego arkusza stylów CSS. Formatujemy tylko ten znacznik, który dodaliśmy na dole strony:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | #bottom { /*ANIMACJA PRZYCIKSU*/ -moz-transition: 0.3s ease-in; -webkit-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in; /*KONIEC ANIMACJI*/ width: 50px; height: 60px; position: fixed; bottom: -5px; right: 5px; background: url('ar.png'); } #bottom:hover { bottom: -1px; } |
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.
Bardzo przydatny bajer. Jest możliwość aby button pojawiał się jak już trochę się przewinie w dół strony?
http://agyuku.net/2009/05/back-to-top-link-using-jquery/
powyżej tutorial z kodem
a dla iWeb???