Połącz się z nami

Internet Maker

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

Opublikowane

dnia

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.

Kontynuuj czytanie
Kliknij, by skomentować

Zostaw komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Internet Maker

Pozycjonowanie strony internetowej a reklamy w Internecie – czym się różnią?

Nie masz cierpliwości do pozycjonowania? Skorzystaj z pomocy profesjonalistów!

Opublikowane

dnia

przez

Chcesz osiągnąć sukces w e-biznesie i zwiększyć widoczność swojej strony w sieci? Nie pozostaje Ci nic innego jak zająć się promocją witryny. Zacznij od inwestycji w pozycjonowanie, czyli zgodnej ze wskazówkami Google optymalizacji strony pod wyszukiwarkę internetową. Pamiętaj, że największa ilość wejść pochodzi właśnie z wyszukiwarek, dlatego zajmowanie wysokiej pozycji w rankingu Google szybko przełoży się na lepsze statystyki.

(więcej…)

Kontynuuj czytanie

Internet Maker

Jak szybko i łatwo stworzyć stronę mobilną

Opublikowane

dnia

W dzisiejszych czasach coraz bardziej popularne staje się przeglądanie stron internetowych na urządzeniach mobilnych. Ba! Samo surfowanie po sieci to w sumie już przeszłość – obecnie zakupy czy płatności mobilne to chleb powszedni dla polskich internautów. 

(więcej…)

Kontynuuj czytanie

Internet Maker

Strona na WordPressie? Grunt to dobry hosting

Opublikowane

dnia

WordPress jest powszechnie uważany za najlepszy system zarządzania treścią zarówno dla prostych blogów i stron, jak i większych serwisów internetowych oraz sklepów. Szacuje się, że już 23% witryn na świecie korzysta z WordPressa, a wśród nich takie marki jak BBC,  MTV czy Sony.

(więcej…)

Kontynuuj czytanie

Internet Maker

Jak zabezpieczyć swoje zdjęcia w chmurze

Opublikowane

dnia

Niedawny wyciek nagich zdjęć znanych osobistości wznowił dyskusje na temat bezpieczeństwa naszych prywatnych danych. Jako że część fotografii została wykradziona poprzez iCloud, prezentujemy dziś jak zabezpieczyć swoje dane w chmurze. (więcej…)

Kontynuuj czytanie

Internet Maker

Jak usunąć historię swojej aktywności z Facebooka?

Opublikowane

dnia

Usunięcie swojej aktywności z Facebooka nie jest takie proste, jakby się mogło wydawać. Portal społecznościowy daje możliwość zachowania kopii swoich postów oraz zamknięcia całego konta, jednak co w przypadku gdy chcemy usunąć tylko poszczególne wpisy? (więcej…)

Kontynuuj czytanie
Reklama

Popularne