Connect with us

Cześć, czego dzisiaj szukasz?

Internet Maker

Przycisk do przewijania w górę strony przy użyciu JQuery

Jeśli strona internetowa posiada dużo treści, to dobrym pomysłem jest umożliwienie odwiedzającym szybkiego powrotu do górnej części serwisu. W tym tutorialu przedstawimy jak można to zrobić przy użyciu jQuery.

  

Stworzymy przycisk znajdujący się w stałej pozycji w prawym dolnym rogu strony. Jednokrotne kliknięcie spowoduje przewinięcie (nie zwykły skok) do góry strony. Ponadto przycisk ten będzie widoczny tylko gdy strona zostanie przewinięta. Gdy znajdziemy się na samej górze portalu, guzik zniknie.

Najpierw dodajmy link do przycisku na naszej stronie. To właśnie on będzie odpowiedzialny za przeniesienie użytkownika na górę.

Teraz możemy użyć stylów CSS do naszego przycisku.

.scrollup{
    width:40px;
    height:40px;
    opacity:0.3;
    position:fixed;
    bottom:50px;
    right:100px;
    display:none;
    text-indent:-9999px;
    background: url('icon_top.png') no-repeat;
}

Jak widać, zdefiniowaliśmy stałą pozycję guzika. Została ona określona na 100px od prawej krawędzi i 50px od dołu. Użyłem text-indent do ukrycia tekstu ?Przewiń?. Zamiast tego widoczny będzie obrazek. display:none sprawia, że guzik jest początkowo niewidoczny.

Teraz chcemy, aby przycisk był widoczny, gdy strona jest rolowana na dół. Możemy to wykonać przy użyciu jQuery.

$(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    });

scrollTop pobiera aktualną pozycję paska przewijania. Jeśli jest ona większa niż 100px od góry, przycisk pojawia się. Jeśli natomiast jest ona mniejsza od 100px, to przycisk znika.

Następnym krokiem jest sprawienie, aby po kliknięciu użytkownik został przekierowany na górę w płynny sposób, a nie gwałtownie. Można to zrobić następująco:

$('.scrollup').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
    });

scrollTop:0 przewija na samą górę strony, czy do pozycji 0px. Liczba 600 oznacza czas trwania animacji w milisekundach. Wyższa wartość spowoduje wolniejszą animację. Równie dobrze może użyć słów ?fast?, ?slow? lub ?normal? zamiast wartości podanych w milisekundach.

Oto kompletny kod jQuery:

    $(document).ready(function(){ 

        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('.scrollup').fadeIn();
            } else {
                $('.scrollup').fadeOut();
            }
        }); 

        $('.scrollup').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 600);
            return false;
        });

    });

Student Informatyki i Ekonometrii na Politechnice Gdańskiej, zapalony fotograf i multiinstrumentalista.

Może cię też zainteresować

Internet Maker

W dzisiejszym tutorialu zajmiemy się wysuwanym tłem stworzonym przy pomocy jQuery. Pokażę krok po kroku, jak przy odrobinie wysiłku stworzyć całkiem interesujący efekt, który przy odpowiednim zastosowaniu...

Internet Maker

W wielu przypadkach nasz umysł łatwiej rejestruje obrazy aniżeli surowy tekst. Nic więc dziwnego, że plakaty to najprostszy i najbardziej przystępny sposób przekazania informacji. Ostatnio sporym zainteresowaniem cieszą się...

Internet Maker

Nadszedł czas na przedstawienie kilkunastu najpopularniejszych obecnie i przydatnych wtyczek jQuery. Z całą pewnością będziesz chciał je przetestować.

Internet Maker

W poniższym tutorialu przedstawię w jaki sposób wykonać taką oto grafikę, zainspirowaną grą Mass Effect. Tym razem niektóre z kroków mogą wydać się trudne, jednak czemu nie macie...