[JavaScript|jQuery] Przewiń do góry (scroll to top)

W tym szybkim poradniku dowiesz się jak stworzyć przycisk "Idź do góry". Zadaniem przycisku jest płynne przewinięcie strony do górnej krawędzi okna przeglądarki.

Kod HTML

Zacznijmy od utworzenia przycisku:

<button class="scroll-to-top" type="button" id="scroll-to-top">☝</button>

Kod CSS

Ostylujmy nasz przycisk:

.scroll-to-top {
    display: none;
    z-index: 9999;
    position: fixed;
    bottom: 20px;
    right: 20px;
    border: 0;
    border-radius: 50%;
    background-color: #181818;
    width: 48px;
    line-height: 46px;
    text-align: center;
    font-size: 26px;
}

Kod JavaScript

Obsługa przycisku:

$(document).ready(function() {

        // Pokaż przycisk, gdy użytkownik scrolluje w dół
        $(window).scroll(function() {
        
            if($(this).scrollTop() > 200) {
            
                $('#scroll-to-top').fadeIn();
                
            }
            
            else {
            
                $('#scroll-to-top').fadeOut();
                
            }
            
        });

        // Przewiń do góry po kliknięciu
        $('#scroll-to-top').click(function(e) {
        
            e.preventDefault();
            
            $('html, body').animate({ scrollTop: 0 }, 800);
            
            return false;
            
        });
        
    });

Wskazówka Jeśli nie chcesz zaśmiecać sobie kodu strony statycznym tagiem button, możesz go tworzyć dynamicznie po załadowaniu drzewa DOM.

Komentarze

Prześlij komentarz

Dzięki za komentarz!

Popular

[C++] Jak obliczyć pole i obwód trapezu?

Przed napisaniem programu obliczającego pole i obwód trapezu, przypomnij sobie wzory. Pole trapezu liczymy według wzoru P=((a+b)*h)/2. Wzór na obwód Ob=a+b+c+d. Obliczając pole trapezu musimy znać rozmiary dwóch podstaw i wysokości. Obliczamy pole trapezu #include <iostream> using namespace std; int main() { int a; int b; int h; double p; cout << "Podaj długość podstawy a: "; cin >> a; cout << "Podaj długość podstawy b: "; cin >> b; cout << "Podaj wysokość: "; cin >> h; if(cin.good() == true) { p = ((a + b) * h) / 2.0; cout << "Pole trapezu wynosi: " << p; } return 0; } Obliczamy obwód trapezu #include <iostream> using namespace std; int main() { int a, b, c, d, ob; cout << "Podaj długość boku a: "; cin >> a; cout << "Podaj długość boku b: "; cin >> b; cout << "Podaj długość boku c: "; cin >> c;...
Czytaj więcej

[HTML] Jak wyśrodkować tekst?

Wyśrodkowanie tekstu w HTML nie jest trudne. Wystarczy tylko zastosować odpowiednią regułę CSS dla elementu, w którym znajduje się dany tekst. W tym przypadku chodzi o regułę text-align:center . Przykład Załóżmy, że mamy nagłówek h1 z tytułem strony i chcemy, aby był on umieszczony po środku. Dopisujemy do niego następujący fragment: style="text-align:center;" - tak jak poniższym przykładzie: <h1 style="text-align:center;">Hello World!</h1> Analogicznie robimy dla innych elementów HTML.
Czytaj więcej

[PHP|HTML] Odświeżenie strony

W tym wpisie zajmiemy się odświeżaniem strony z poziomu PHP jak i poprzez odpowiedni metatag HTML. Zapewne tworząc lub modyfikując jakąś stronę HTML spotkałeś/-aś się kiedyś z tagiem meta refresh . Jak pamiętasz (lub nie) tag ten służy do odświeżania lub przekierowania na inny URL z poziomu klienta. W takim razie co zrobić, gdy chcemy takie odświeżenie lub przekierowanie wymusić po stronie serwera? W języku PHP z pomocą przychodzi nam funkcja header , która służy do wysyłania surowych nagłówków HTTP do przeglądarki. Funkcja jest prosta w użyciu, a kod umożliwiający odświeżenie strony ogranicza się do jednej linii. My jednak napiszemy własną funkcję, która będzie odświeżała stronę. Nasza funkcja będzie oczywiście oparta o funkcję header. Odświeżanie strony HTML Aby emulować nagłówki HTTP z poziomu kodu HTML, należy użyć tagu meta http-equiv . Jeśli zatem chcemy odświeżyć lub przekierować stronę z poziomu przeglądarki, tworzymy w sekcji head taki tag: <meta http-equiv="refresh...
Czytaj więcej