JavaScript: Powrót do góry strony
od Podstaw
10 godz. 55 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Wstep do programowania oraz najwazniejsze konstrukcje jezyka
- Liczne “smaczki” zwiazane z kazda z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich trescia, atrybutami, stylami CSS
- Odczytywanie wspólrzednych polozenia elementu i jego wymiarów
- Obsluga zdarzen i debugowanie kodu
- Praktyczne projekty
- I wiele, wiele wiecej!
Witaj w kursie JavaScript od Podstaw!
Jeśli poznałeś już wymienione wyżej technologie, to zapewne zdajesz sobie sprawę z ich ograniczeń. Za pomocą języka HTML tworzymy bowiem strukturę dokumentu, dodajemy treść tekstową, obrazy czy wideo. Aby jednak strona internetowa wyglądała perfekcyjnie, korzystamy z arkuszy stylów CSS, które pozwalają nam opisać wygląd wszystkich elementów HTML, ustawić wielkość tekstu czy dodać tło strony. No właśnie, ale gdzie tutaj interakcyjność?Zapewne już wiesz, że język CSS oferuje tzw. pseudoklasy, które pozwalają nam np. przypisać zmianę koloru elementu po najechaniu na niego kursorem myszy. I to tak naprawdę wszystko, na co możemy zareagować. A co gdybyśmy chcieli po wciśnięciu jakiegoś przycisku wysunąć ukryty panel, sprawdzić poprawność wypełnianego właśnie formularza lub pobrać dane z serwera i wyświetlić je na stronie bez przeładowywania witryny? Dobra wiadomość jest taka, że to wszystko jest możliwe z użyciem języka JavaScript, który “rozumie” każda przeglądarka internetowa.Choć język JavaScript powstał jako język skryptowy na potrzeby stron internetowych, to już dawno temu “wyszedł” z przeglądarek internetowych i może być używany tak naprawdę gdziekolwiek. W kursie, który masz przed sobą, poznasz język JavaScript jako niezależny język programowania, a dopiero później dowiesz się, jak wykorzystywać go do wzbogacania stron internetowych. Dzięki postawieniu grubej linii pomiędzy samym językiem, a Obiektowym Modelem Dokumentu dostępnym w przeglądarkach internetowych, będziesz nie tylko bardzo dobrze rozumiał sam język, ale w przyszłości wykorzystasz go do innych zastosowań.Na początku omówimy ciekawą historię języka JavaScript, a chwilę później rozpoczniemy poznawanie najważniejszych jego konstrukcji. I tak dowiesz się czym są zmienne, jakie typy danych dostępne są w tym języku, czym są liczne operatory, instrukcje warunkowe, pętle, tablice, obiekty i funkcje. Wszystkie te zagadnienia są bardzo podobne w innych językach programowania, dlatego kurs ten jest również świetnym wstępem do programowania w ogóle. Każda z przedstawianych konstrukcji języka jest bardzo dokładnie tłumaczona z myślą osobach początkujących. Nie zmienia to jednak faktu, że nawet osoby znające już podstawy języka JavaScript znajdą tutaj coś dla siebie, gdyż na każdym etapie przedstawiane są również liczne ciekawostki odnośnie danej konstrukcji.Kiedy zrozumiesz już jak działa język JavaScript, przejdziemy do drugiej połowy kursu, gdzie dokładnie omówimy Obiektowy Model Dokumentu, dostępny w przeglądarkach internetowych. Zobaczysz jak przeglądarka tworzy z kodu HTML drzewo dokumentu, jak reprezentowane są poszczególne jego węzły, a także jak język JavaScript potrafi z tym “wewnętrznym światem” współpracować. Dowiesz się jak wyszukiwać na stronie interesujących nas elementów HTML, a także jak tworzyć nowe elementy, przypisywać im treść i wstawiać je na stronę. Popracujemy również z atrybutami elementów, ich klasami i wreszcie ze stylami CSS, abyśmy mogli wpływać dynamicznie na wygląd naszej strony.Zobaczysz również, jak możemy w dowolnym momencie odczytać współrzędne położenia elementu na stronie, a także jego wysokość czy szerokość. Tę wiedzę wykorzystamy później w praktycznym przykładzie.Jeden z rozdziałów kursu poświęcony został zdarzeniom, a więc możliwości reagowania na zachowania użytkownika. Dzięki temu zobaczysz, jak możemy przypisać np. zdarzenie kliknięcia do wybranego elementu, a kiedy zostanie on kliknięty, wykona się przygotowany przez nas kod. Poznasz kilka różnych sposobów na przypisywanie oraz usuwanie zdarzeń, a także dowiesz się czym jest tzw. “bubbling” oraz “capturing” czy jak zablokować domyślną akcję przeglądarki.Przy pisaniu jakiegokolwiek kodu, zawsze pojawiają się błędy, dlatego i tutaj Twoje wątpliwości nie pozostaną bez odpowiedzi. Poznasz wszystkie typu błędów, które mogą się pojawić podczas wykonywania naszego kodu, a także wiele sposobów ich wykrycia i wyeliminowania.W kursie nie brakuje oczywiście praktycznych przykładów, które celowo zostały ułożone tak, aby wykorzystać w nich jak najwięcej zdobytej wcześniej wiedzy. Nie zostaniesz więc sam z poczuciem, że co prawda rozumiesz jak działa dana konstrukcja, ale nie masz pomysłu, kiedy z niej skorzystać. Na początek wykonamy praktyczny projekt losowania liczb z wybranego przedziału tak, aby nie mogły się powtórzyć. Już przy tym projekcie poznasz wiele ciekawych technik i sztuczek.Następnie przejdziemy do nieco bardziej zaawansowanego przykładu i napiszemy skrypt, który pozwoli nam sortować dane w tabeli po wybranych kolumnach, kiedy któraś z nich zostanie kliknięta. Zobaczysz jak sortować dane zarówno malejąco jak i rosnąco, a także jak zmieniać kolejność elementów HTML na stronie.W kolejnym projekcie zajmiemy się walidacją danych wpisywanych do formularza, by ten nie mógł zostać wysłany do serwera tak długo, jak zawiera jakiekolwiek błędy. Zobaczysz tutaj zdarzenia związane z polami formularza, a także sposoby na pobieranie z nich wartości i sprawdzanie czy są one poprawne. Zadbamy także o wrażenia użytkownika i wyświetlimy na stronie stosowne błędy, a także podświetlimy źle uzupełnione pola na czerwono.W przedostatnim projekcie wstawimy na stronę przycisk, który będzie się pojawiał po przewinięciu strony w dół, a znikał po odwrotnej akcji. Co jednak ciekawe, po jego kliknięciu, strona zostanie automatycznie, płynnie przewinięta do samej góry.W ostatnim projekcie stworzymy bardzo efektowny dymek z podpowiedzią, który będzie się pojawiał nad elementem po najechaniu na niego kursorem myszy. Wykorzystamy tutaj mnóstwo ciekawych technik. Dowiesz się również jak swój kod przygotować w taki sposób, abyś mógł go udostępnić innym osobom, by w łatwy sposób skorzystały z przygotowanego Tooltipa na swoich stronach.Kurs kończy się sekcją Tips & Tricks, w której znajdziesz 10 krótkich lekcji. W każdej z nich została omówiona jedna sztuczka. Każda z nich pozwoli Ci jeszcze lepiej zrozumieć język JavaScript, ale przede wszystkim zaoszczędzić czas i kilka linijek często niepotrzebnego kodu.Podsumowując, kurs ten jest nie tylko wprowadzeniem do samego języka JavaScript, ale także do Obiektowego Modelu Dokumentu. Dzięki wyraźnemu rozdzieleniu tych dwóch zagadnień, będziesz mógł w przyszłości wykorzystać język JavaScript także do innych zastosowań, poza przeglądarką internetową.
Kurs JavaScript od Podstaw to między innymi:
- Wstęp do programowania
- Najważniejsze konstrukcje języka
- Liczne “smaczki” związane z każdą z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich treścią, atrybutami, stylami CSS
- Odczytywanie współrzędnych położenia elementu i jego wymiarów
- Obsługa zdarzeń
- Debugowanie kodu
- Praktyczne projekty
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript czy programowania nie jest wymagana, gdyż wszystkie konstrukcje są starannie tłumaczone. Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej, z kursem JavaScript w Praktyce, który powstał jako dopełnienie tego kursu i porusza nieco bardziej zaawansowane tematy, na które tutaj zabrakło już czasu.
W tej lekcji troszkę się rozluźnimy i stworzymy naprawdę ciekawy projekt, który pokaże Ci jak w praktyce
wykorzystać wiedzę na temat suwaków, czyli scrollTop, o czym już, mówiliśmy i jak wykorzystać zdarzenie
windows scroll, które będzie odpalane, kiedy będziemy scrollować tutaj przeglądarkę, będę chciał, abyśmy stworzyli
przycisk, który pojawia się kiedy trochę przeskrolujemy.
On tutaj nam wyskoczy i po kliknięciu, którego będziemy przenoszeni do góry strony. Na razie jest tutaj sama
treść, w kodzie HTML wygląda to następująco.
Jak widzisz, żadnego przycisku tutaj nie ma.
Mam jedynie style CSS.
Jeszcze za moment ci je pokażę i będę na chciał na sam początek, w naszym skrypcie utworzyć sobie przycisk,
który wstawimy dynamicznie na stronę.
Czyli owszem, moglibyśmy tutaj od razu jakiś przycisk utworzyć.
Nie ma problemu i do niego się odwołać, ale również możemy stworzyć skrypt, który jeżeli komuś damy to
ten skrypt automatycznie mu taki przycisk utworzy i na stronę wstawi.
Bo to nic trudnego, więc będę chciał napisać button i tu mógłbym napisać document.create
ElementButton, ale ja chciałbym stworzyć sobie funkcję, zaraz zobaczysz dlaczego createButton, która mi
taki przycisk stworzy.
Czyli wiemy już, że musimy stworzyć funkcję createButton i ona musi poprzez return tutaj nam taki
obiekt zwrócić.
Więc stwórzmy sobie taką funkcję.
Tworzą ją dlatego, że chcę w niej zawrzeć od razu więcej rzeczy dotyczących tego przycisku.
Funkcja się nazywa createButton i wewnątrz utworzymy button,
tak jak wspomniałem poprzez document.createElement Button, będzie to elementButton i żebyśmy mogli
go zapisać i dalej na nim pracować, to ta funkcja musi go zwrócić.
Myślę, że już wie, że tak naprawdę to zwraca referencje do tego obiektu, który tutaj został zwrócony i
tak dalej, a pomiędzy tym chce zrobić kilka rzeczy.
Otóż do tego przycisku button, aby on mógł ładnie wyglądać.
Przypiszemy klasę, w stylach CSS zdefiniowaniem klasę, która się nazywa backToTop i chciałbym ją przypisać
do takiego przycisku, a więc buttonClassList.add backToTop i chciałbym tam przycisk obrazów wstawić
na naszą stronę, a więc document.body.appendChild button.
No i widzisz, że ten przycisk w tym momencie zostanie, kiedy tę funkcję wywołujemy w tym miejscu. On zostanie
utworzony, zostanie do niego dodana klasa backToTop i on zostanie wstawiony do body. Natomiast bez problemu
możemy go zawrócić i
mamy go tutaj, czyli możemy na tej zmiennej, tutaj poniżej, bez problemu operować.
Tak jak już wspominałem, w tym kursie, nie ma znaczenia czy on jest ustawiony na stronę, czy on jest tylko
tutaj utworzony, gdzieś w pamięci.
Tak samo możemy na jego referencji operować, którą tutaj sobie zapiszemy i teraz zobaczmy taki przycisk Jak
widzisz się tutaj pojawił.
Chciałbym, żeby jeszcze miał tekst, więc przypiszmy go tutaj button.textContent równa się powrót do
góry.
W ten sposób, zobaczmy i on się teraz tutaj pojawił.
Tak go ostylowałem, że cały czas jest w jednym miejscu natomiast chciałbym, aby on był niewidoczny i aby
był niewidoczny
zdefiniowałem w stylach dla niego klasę hidden, która tutaj się znajduje i chciałbym ją również na samym
początku do niego dodać, a więc poprzez metodę add
tutaj wiesz, że możemy podać kolejny parametr.
Jest to kolejna klasa, którą dodamy i teraz te dwie klasy kiedy dodamy, to ten przycisk na stronie jest.
Możemy go gdzieś znaleźć tutaj, ale jest on niewidoczny właśnie przez klasę hidden.
No i teraz będziemy chcieli zrobić rzecz następującą. Otóż kiedy zaczniemy scrollować, to chciałbym, żeby ten
przycisk się pojawił.
A kiedy dojedziemy do góry, aby on znikał.
No i teraz będziemy to mogli zrobić, już teraz myślę, że widzisz dlaczego stworzyłem funkcję createButton,
po to, aby od razu za nas wykonała więcej czynności, a na końcu nam tutaj zwróciła referencje do tego przycisku,
który został na stronie umieszczony.
Będziemy chcieli skorzystać ze zdarzenia window.scroll, więc musimy do obiektu.window takie zdarzenie sobie
przypisać.
Możemy to zrobić poprzez addEventListener albo np. poprzez window.onscroll.
Zdarzenie nazywa się scroll.
Tutaj będzie funkcja, którą będziemy chcieli wykonać, zaraz ją tutaj podamy i false. Wpiszmy sobie teraz funkcję.
Możemy ją tutaj podać w sposób anonimowy, chcemy przechwytywać event i w tej funkcji wpiszemy, to co ma
się wykonać podczas scrollowania.
Na sam początek chciałbym wpisać tutaj console.log Scroll, żebyś wiedział kiedy w ogóle takie zdarzenie
w przeglądarce jest uruchamiane.
Przejdźmy do konsoli.
Odświeżę stronę i zaczynam scrollować.
I zobacz, tutaj widzimy ile razy takie zdarzenie jest odpalane.
Kiedy scrolluje bardzo wiele razy ono jest odpalane i co jest bardzo ważne w takich funkcjach, które
przypisujemy na scrollowanie.
Nie powinniśmy robić bardzo wielu rzeczy, czyli tutaj nie powinno być dużo obliczeń, dużo ciężkiego kodu,
bo przeglądarka, aby mogła to wszystko robić płynnie, jak widzisz wielokrotnie, to zdarzenie odpala.
To musi mieć czas na wykonanie tego kodu i gdybyśmy tutaj umieścili bardzo dużo kodu takiego, który robi
zaawansowane rzeczy np. wyszukuje czegoś na stronie cały czas lub stawia coś na stronę, to nie będziemy
mieć tutaj pełnej płynności.
Dlatego właśnie, też dobrym pomysłem zawsze tak jak na górze ci pokazywałem w innych lekcjach, jest zapisywanie
od razu referencji do jakichś obiektów, bo moglibyśmy przecież za każdym razem do nich się odwoływać
poprzez np. document.querySelector i ich wyszukiwać.
Natomiast o tym również nie wspominałem,
a jest to bardzo ważne. Wtedy za każdym razem w drzewie DOM takiego elementu wyszukujemy, czyli gdybyśmy
tutaj podczas scrollowania za każdym razem takiego elementu szukali i tutaj tworzyli zmienną, na przykład
var, to jest to dużo bardziej obciążające dla przeglądarki, więc zawsze lepiej tę zmianę utworzyć wcześniej
i one przechowują referencje do elementu, który został znaleziony.
Jak widzisz, wielokrotnie to zdarzenie się odpala i będziemy chcieli na nie reagować.
Będę chciał tutaj wyświetlić console.log
document.body
scrollTop,
czyli ile pikseli od góry przescrollowaliśmy. Zjedziemy sobie na samą górę i zaczynam scrollować,
jak widzisz te wartości tutaj się pojawiają, Jeśli zjadę na sam dół, to mamy tutaj 400.
I teraz chciałbym zrobić rzecz taką, że jeżeli zescrollujemy minimum 100 pikseli od góry, bo chciałbym,
aby pojawił się nasz przycisk.
Więc nic prostszego.
Zróbmy to wszystko w if'ie, a nie w console.log'u.
Zrobię tutaj trochę miejsca i w scrollTop.
Zróbmy sobie jest większe lub równe 100 pikseli, czyli tyle od góry o odsunęliśmy.
To będziemy chcieli odwołać się do naszego przycisku, który mamy tutaj. Właśnie po to z tej funkcji zwracajem
do niego referencje, aby się do niego móc odwoływać i do classListRemove i chcemy usunąć klasę hidden.
Pokazywałam, ci że ta klasa go ukrywa.
Przy okazji zdefiniowaniem tutaj w stylach CSS transition, w CSS3.
Dzięki temu kiedy usuniemy taką klasę, to on zostanie płynnie zanimowany i na naszej stronie się pojawi.
Ok, więc wróćmy jeszcze do skryptów na sekundę.
Kiedy zescrollujemy o 100 pikseli od góry, to chcemy usunąć z tego przycisku klasę hidden.
Sprawdźmy czy nam to zadziała.
Scrolluje i działa, bo rzeczywiście przycisk się pojawił.
Natomiast teraz chciałbym go również ukryć, bo on cały czas jest widoczny, więc możemy tutaj zrobić else,
czyli, jeżeli document.bodyScrollTop będzie mniejsze od stu, bo chcemy go ukryć.
Czyli nic trudnego.
Po prostu dodamy mu klasę
hidden,
sprawdźmy jak to działa.
Pojawił się i teraz scrollujemy i jeżeli tutaj mamy mniej niż 100 pikseli, to on znika, OK, wszystko działa,
jak należy.
No i ostatnią rzecz, którą chcemy zrobić, to po kliknięciu na ten przycisk, przenosić na górę strony, bo
teraz ten przycisk nic nie robi, więc teraz się tym możemy zająć.
Przejdźmy sobie
tutaj, mamy referencje do przycisku, więc przypiszemy do niego zdarzenie kliknięcia, czyli po kliknięciu
w ten przycisk chcemy wywołać funkcję.
Przy okazji zauważ, że tutaj przechwytywaliśmy event, ale nic nie robiliśmy, bo nie było nam to do niczego potrzebne.
Czasami nie jest to potrzebne i możemy w ogóle pominąć tutaj taką zmienną, ale możemy ją również zostawić.
Nie ma to znaczenia.
Czyli teraz na kliknięcie do naszego przycisku, chcemy przypisać pewne zdarzenie.
Po pierwsze chciałbym tutaj zrobić event i stopPropagation, nie jest to, aż tak ważne natomiast mówiłem
ci, że jeżeli klikniemy na taki przycisk, a będą zarejestrowane zdarzenia jeszcze kliknięcia na inne elementy,
to również one zostaną obsłużone.
Natomiast po kliknięciu na taki przycisk nie chcemy, aby inne zdarzenia np. dla body dla body jakiegoś div'a,
były również obsługiwane, więc stopPropagation
możemy tutaj wpisać i teraz ostatnia rzecz, którą chciałbym zrobić to przewinąć na górę strony.
Najprościej byłoby to zrobić, odwołując się do document.body
scrollTop i ustawić tę wartość na 0.
Oczywiście nie będzie to płynna animacja, ale
sprawdźmy czy to zadziała.
Przycisk się pojawia i znika, po kliknięciu na niego przescrolluje nam do samej góry i on zniknął, bo w momencie
kiedy przypiszemy scrollTop 0, to również zdarzenie scroll na windows się wykona, na window.
I tutaj ten przycisk zostanie ukryty,
w tym oto miejscu, czyli na razie nam to działa.
Natomiast ja chciałbym, aby płynnie przewijałą nas do góry.
I to jest ostatnia rzecz, którą zrobimy w tej lekcji, w tym projekcie.
Chcemy zrobić płynną animację, czyli w tym miejscu będę chciał wykonać funkcję, którą sobie nazwiemy
animateScroll
i teraz taką funkcję będę chciał utworzyć np. tutaj.
Na początku w takiej funkcji sprawdzimy sobie czy document.body.scrollTop jest większe od zera, czyli czy jesteśmy
np. w tym miejscu.
Jeżeli dojdziemy do zera, to już nasz warunek się nie spełni.
Czyli, jeżeli jest większe od zera, to będziemy chcieli odwołać się do window następnie do scrollBy.
Ja ci to już pokazywałem w tym kursie.
Tutaj mamy X oraz Y, czyli X jest to poziomy suwak my go tutaj nie mamy, więc zero, a suwak pionowy, czyli
y, będę chciał zmienić na minus pięć.
To oznacza tylko tyle, że po wykonaniu animateScroll przesuniemy o minus 5 pixeli od tego gdzie jesteśmy
teraz, czyli minus pięć, minus pięć, minus pięć.
Ale to się wykona tylko raz.
Możemy to sprawdzić.
Klikam powrót do góry i tutaj powinno nam drgnąć o 5 pikseli.
Tak też się stało.
Natomiast jak zrobić, aby do samej góry to było animowane.
No właśnie, skorzystamy setTimeout.
Pamiętasz o tej funkcji i powiemy tutaj, że chcemy wykonywać animate scroll, co 10 milisekund, czyli wykonamy
sobie setTimeout i mówimy tutaj za 10 milisekund wykonaj tę funkcję.
Ta funkcja sobie sprawdzi, czy document.bodyscrollTop jest większa od 0, czyli czy jeszcze nie doszliśmy
tutaj np. jesteśmy tutaj, tak, więc chcemy przescrollować o pięć pikseli do góry, kiedy będziemy scrollować.
To oczywiście zdarzenie tutaj, które tutaj widzieliśmy również się wykona, więc nasz przycisk sam się
ukryje, ale znowu sobie sprawdzimy, czy znowu ta wartość to nie jest 0.
Nie jest, więc ustawiamy kolejny Timeout, czyli za 10 milisekund ma się to wykonać. W którymś momencie
dojdziemy do wartości, gdzie scrollTop to będzie 0 i po prostu Timeout się nie ustawi.
Mam nadzieję, że to rozumiesz i teraz odświeży sobie pojawił się przycisk, po kliknięciu na niego pamiętasz.
Jesteśmy w tym miejscu, wywołamy funkcję animatescroll, która właśnie sama będzie się animować sprawdzimy
czy to działa i jak widzisz mamy płynną animację,
Dzięki temu, że co 10 milisekund wywołujemy taką funkcję.
Gdybyśmy to zrobili co 100 milisekund, to ewidentnie nie byłoby to już płynne. Zobacz, wyglądałoby to w taki
oto sposób.
Natomiast, zauważ, że w którymś momencie ten przycisk również zniknie, dokładnie, dlatego że kiedy używamy
Windows scrollBy, to również odpalane jest zdarzenie
windows scroll, tak samo jak gdybym tutaj kółkiem myszy scrollował
i dlatego ten przyciskw pewnym momencie się ukrył.
Zmieńmy sobie to z powrotem na 10 milisekund, było to dosyć płynne.
Fajnie to wygląda fajnie jest skalowane i na tym ten projekt zakończymy.
Mam nadzieję, że również wiele się z niego nauczyłeś.
Kod
Powrót do góry strony - finish · 4 min
(function() {
function createButton() {
var button = document.createElement("button");
button.classList.add("backToTop", "hidden");
button.textContent = "Powrót do góry";
document.body.appendChild(button);
return button;
}
var button = createButton();
function animateScroll() {
if(document.body.scrollTop > 0) {
window.scrollBy(0, -5);
setTimeout(animateScroll, 10);
}
}
button.addEventListener("click", function(e) {
e.stopPropagation();
animateScroll();
}, false);
window.addEventListener("scroll", function(e) {
if(document.body.scrollTop >= 100) {
button.classList.remove("hidden");
} else {
button.classList.add("hidden");
}
}, false);
})();Powrót do góry strony - CSS · 1 min
@charset "utf-8";
* {
padding: 0;
margin: 0;
}
body {
font: 14px/18px Tahoma, Arial, sans-serif;
}
.container {
width: 80%;
margin: 30px auto;
overflow: hidden;
}
h1 {
padding-bottom: 20px;
margin-bottom: 40px;
border-bottom: 1px #D8D8D8 solid;
line-height: 1;
font-weight: normal;
color: #666666;
}
p {
margin-bottom: 30px;
line-height: 24px;
color: #4C4C4C;
}
.backToTop {
padding: 15px 25px;
border: none;
border-radius: 10px;
background: rgba(0, 198, 255, .9);
opacity: 1;
-webkit-transition: visibility 0.2s, opacity 0.2s;
transition: visibility 0.2s, opacity 0.2s;
position: fixed;
bottom: 30px;
right: 30px;
cursor: pointer;
font: 14px/1 Tahoma, Arial, sans-serif;
color: #006583;
}
.backToTop.hidden {
opacity: 0;
visibility: hidden;
}createButton · 1 min
(function() {
function createButton() {
var button = document.createElement("button");
button.classList.add("backToTop", "hidden");
button.textContent = "Powrót do góry";
document.body.appendChild(button);
return button;
}
var button = createButton();
})();