Obrazek z nagłówka

#WEBMASTER: Jak dodać pływający przycisk powrotu na górę strony?

Aktualizacja:
Dzisiaj opiszę jak dodać pływający przycisk powrotu na górę strony, taki jaki mam na moim blogu.
Całość składa się z trzech kroków.

Krok 1: Dodanie kodu HTM.

Tworzymy przycisk, który ma za zadanie przenosić użytkownika na górę strony:
<button onclick="topFunction()" id="przycisk_up" title="Do góry">Do góry</button>
Kod ten dodajemy w dowolnym miejscu między znacznikami <body>...</body>  naszej strony.
Ja polecam zrobić to zaraz przed zamknięciem tego znacznika.


Krok 2: Dodanie stylów CSS

W szablonach CSS (czyli np. między tagami <style type="text/css">...</style>) dodajemy następujący kod:
#przycisk_up {
    display: none; /* standardowo przycisk jest ukryty */
    position: fixed; /* przycisk jako "przyklejony" do strony */
    bottom: 20px; /* umiejscawiamy przycisk na dole strony */
    right: 30px; /* umiejscawiamy przycisk po prawej stronie */
    z-index: 99; /* upewniamy się że przycisk jest na wierzchu */
    border: none; /* usuwamy ramki */
    outline: none; /* usuwamy obrys */
    background-color: red; /* ustawiamy kolor tła */
    color: white; /* kolor tekstu */
    cursor: pointer; /* dodanie "łapki" po najechaniu myszką */
    padding: 15px; /* trochę odstępu wewnątrz */
    border-radius: 10px; /* zaokrąglone rogi */
}

#przycisk_up:hover {
    background-color: #555; /* dodaje szare tło po najechaniu na przycsik */
}

Krok 3: Dodajemy JavaScript

Ten kod można dodać zaraz przed znacznikiem </body>
<script>
// kiedy użytkownik przewinie stronę w dół o 20 pikseli, zobaczy przycisk
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
    if (document.body.scrollTop &gt; 20 || document.documentElement.scrollTop &gt; 20) {
        document.getElementById(&quot;przycisk_up&quot;).style.display = &quot;block&quot;;
    }
else {
        document.getElementById(&quot;przycisk_up&quot;).style.display = &quot;none&quot;;
    }
}
// Kiedy użytkownik kliknie przycisk, wróci do góry strony
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>


To wszystko :)
Jeżeli potrzebujecie pomocy z wgraniem lub dostosowaniem przycisku - piszcie w komentarzach.

Artykuł przetłumaczony na potrzeby polskich użytkowników, źródło: w3 Schools