[jQuery] Efektowny link/przycisk „Do góry”
Ten wpis ma 17 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
Dzisiaj postanowiłem przedstawić Tobie małą, ale często przydatną rzecz jaką jest link powrotu do początku strony.
Pewnie się zastanawiasz, co w tym takiego wyjątkowego? No to Ci odpowiem. Użyję do tego celu biblioteki jQuery przez co link będzie się pojawiał w rogu strony w momencie gdy strona będzie przewinięta. Fajnie, co nie?
Ale jak to zrobić? To już Ci pokażę.
Zaczynamy od kodu HTML:
<a href="#top" id="top-link">Wróć do początku</a> |
Teraz czas na trochę CSS'a:
#top-link { display: none; position: fixed; right: 5px; bottom: 5px; color: #fff; font-weight: bold; text-decoration: none; border: 1px solid #000; background: #b30000; padding: 10px; *height: 1.5%; } |
Zapewne się teraz zacząłeś zastanawiać, a co oznacza zapis "*height: ..."?
Oznacza to specjalny zapis stylu, który będzie odczytywany tylko przez IE7.
Jeśli byś chciał określić styl dla IE6 (który powinien przestać być uzywany) to skorzystasz z zapisu "height: ...". Dzięki temu nie musisz tworzyć osobnego stylu dla IE.
OK, teraz pora na trochę Javascriptu.
jQuery.fn.topLink = function(settings) { settings = jQuery.extend({ min: 1, fadeSpeed: 200, ieOffset: 50 }, settings); return this.each(function() { //listen for scroll var el = $(this); el.css('display','none'); //in case the user forgot $(window).scroll(function() { if(!jQuery.support.hrefNormalized) { el.css({ 'position': 'absolute', 'top': $(window).scrollTop() + $(window).height() - settings.ieOffset }); } if($(window).scrollTop() >= settings.min) { el.fadeIn(settings.fadeSpeed); } else { el.fadeOut(settings.fadeSpeed); } }); }); }; $(document).ready(function() { $('#top-link').topLink({ min: 400, fadeSpeed: 500 }); //smoothscroll $('#top-link').click(function(e) { e.preventDefault(); $.scrollTo(0,300); }); }); |
I to by było na tyle. Demo z tego artykułu - Efektowny powrót do góry.
O autorze
