Wykryto działanie AdBlocka!

Prawdopodobnie masz właczonego Adblocka. Korzystanie z bloga jest całkowicie darmowe. Jeśli jednak chcesz docenić prace autora, wyłacz blokowanie reklam dla tej witryny, aby jeszcze bardziej zmotywowac autora do dalszej pracy oraz częstszej publikacji artykułów.

Dziękuje :)

Treść główna bloga

Artykuły

Przewijanie strony reagujące na aktualną wysokość


Scroll do góryBiblioteka jQuery pozwala urozmaicić nasze strony o wiele efektów od najprostszych jak przewijanie ku górze do bardziej zaawansowanych. Płynnego przewijania do górnej części strony sprawia, że nie musimy używać brzydkiego scroll’a przeglądarki. Ten typ będzie reagował na aktualną pozycję, na której znajduje się użytkownik.

Instalacja jest bardzo prosta.
1. Należy do pliku CSS dodać:

.scrollup
{
width:40px;
height:40px;
opacity:0.4; // Przezroczystość
position:fixed;
bottom:50px; // Można zmienić pozycje
right:100px; // Można zmienić pozycję
display:none;
text-indent:-9999px;
 background: url('icon_top.png') no-repeat;
}

2. Kod HTML ( należy umieścić tam, gdzie chcemy aby sctollup był widoczny)

<a href="#" class="scrollup">Scroll</a>

3. Kod JS:

$(window).scroll(function(){
        if ($(this).scrollTop() > 200) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    });
	
$('.scrollup').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
    });	

Dzięki temu sprawimy, że nasza witryna będzie się lepiej prezentować.

Skryptoteka

Pozdrawiam,
Dominik

  • Nie wystarczy $('html').animate([...]) zamiast $("html, body").animate([...])? Raczej nie ma sensu animować swój elementów, skoro można tylko jeden. 😉

    • Za duża różnica to to nie jest ale zawsze kod trochę bardziej zoptymalizowany.
      Dzięki za zwrócenie uwagi.