/ Z sieci

Przycisk "Wróć na górę"

Button "back to top" pozwala użytkownikom płynnie przewinąć stronę do początku. Mały szczegół, który ułatwia nawigację na ciągnącej się w dół stronie, na przykład galerii z dużą ilością obrazków lub rozbudowanym artykule.

Kolejny przykład pięknego i prostego kodu znalezionego w sieci.
Jeśli galeria na waszej stronie nie ma końca lub wasze artykuły wydają się rozciągać nadmiernie w dół warto go użyć by użytkownik mógł łatwo i szybko wrócić do górnego menu zamiast wyłączać naszą stronę znudzony przewijaniem.

back-to-top-tresc-min

Przycisk "wróć na górę", który pojawia się po określeniu przez nas ilości pikseli przewijania, łagodnie przechodzi w tryb zwiększonej przezroczystości by nie rozpraszać czytelnika.

Wystarczy dodać linijkę kodu w znaczniku body:

<body>
	<!-- treść strony -->
 
	<a href="#0" class="cd-top">Top</a>
 
	<!-- skrypty -->
</body>

oraz podłączyć do strony plik .css i .js.
W pliku .js mamy trzy zmienne odpowiedzialne za wygląd łącza:

// po ilu pikselach przewijania w dół wyświetli się łącze
var offset = 300,
//po ilu pikselach włącza się przezroczystość
offset_opacity = 1200,
// czas trwania animacji przewijania w milisekundach
scroll_top_duration = 700;

W pliku .css możemy łatwo zmienić wygląd buttona.

backtotop-min
Wszystko możecie pobrać na stronie:
codyhouse.co/gem/back-to-top/.

Jest tam też link do demo, które pokazuje jak to działa.
Do działania potrzebna jest biblioteka jquery, którą należy podpiąć do strony.

Pozdrawiam was serdecznie i zachęcam do subskrypcji oraz komentowania.

Krzysztof Nowakowski

Krzysztof Nowakowski

Bloger, grafik, pasjonuje mnie animacja i webdesign. Uwielbiam inkscapea, gimpa i blendera. Trochę rysuję i ciągle staram się doskonalić we wszystkim co robię.

Więcej