[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.