search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[jQuery] Efektowny link/przycisk „Do góry”

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);
	});
});

Należy pamiętać o tym by dołączyć do pliku HTML plik z biblioteką jQuery oraz rozwinięcie tej biblioteki plik: jQuery.ScrollTo, który można pobrać STĄD

I to by było na tyle. Demo z tego artykułu - Efektowny powrót do góry.

  • Michal

    Fajny przycisk, ale styl tego artykułu jest dla mnie trudny do zniesienia: „Zapewne się teraz zacząłeś zastanawiać, a co oznacza zapis ?*height: ??? ” Czasami warto przyjąć założenie, że czytelnik cokolwiek się zna.

  • Dzięki za komentarz, postaram się poprawić mój styl pisania artykułów.
    Takie opinie są dla mnie bardzo ważne.

  • Rafal

    fajny bajer, wykorzystam to na jednej ze stron 🙂

  • Super, ale wykryłem wadę: pod przeglądarką Opera 10 jeśli użyjemy guziczka i zjedziemy ponownie w dół to literki z guziczką są zaznaczone na czarno – ilość zaznaczonych liter zależy od miejsca kliknięcia w przycisk – zaznaczenie znika przy następnym pojawieni się jeśli klikniemy np. na tekst „content”.

  • mrj

    Witam bardzo.
    Miło tak popatrzeć, jak ktoś potrafi zrobć takie fajne rzeczy. Ja nie potrafię… Mam pytanie, a jestem laikiem. Czy możesz tak napisac ten tekst i wyjasnienia, żeby można było zaadaptować (oczywiście jeżeli pozwolisz) Twój „wynalazek”? Chodzi o łopatologię: ten kod wpisujesz tu, a ten tu, a tamten tam… Inaczej jeszcze coś zepsuję na stronie i będzie kłopot.
    Pozdrawiam
    mrj

  • Piotr Nalepa

    wystarczy zajrzeć do kodu źródłowego w demo i wszystko będzie jaśniejsze 🙂

  • mrj

    Nie wiem czy się przyznać… zaglądałem -;) Ale poważnie. Swoją stronę stworzyłem na podstawie szablonu. Jej wygląd jest zaplanowany (chciaż mogę go modyfikować) a wszystko co ma być „mięsem” na stronie – wpisuję poza szblonem. Chodzi mi o to, co mam wpisać w szabonie strony, a co na samej stronie. Podsyłam adres strony. Jaśniej: inni piszą co umieścić w sekcji takiej a takiej i do dzieła!
    Pozdrawia
    MRJ

    Ps. Poznać pasjonata, ale sprawa nie jest aż tak pilna, żeby odpisywać o 6.19 rano! -:))

  • Piotr Nalepa

    akurat przeglądałem neta przed wyjściem do pracy 😉

  • piff

    Witam,
    Bardzo fajna sprawa ale zastanawiam się jak mógłby wyglądać kod, który odpowiada jedynia za efekt pojawiającego się elementu, bez efektu scroll’owania.