jQuery topLink Plugin

Bu eklenti nedir ne işe yarar? Web sitelerinin altlarında “üste çık” şeklinde bir link görmüşsünüzdür. İşte onun jQuery ile yapılmış hali. Biz bunu jQuery olmadanda yapıyorduk diyeceksiniz şimdi. Bunun özelliği efektli olması.

Buradan demoya bakınca anlayacaksınız.( Sayfayı aşağıya indirin ve sağ alt köşeye bakın )

Gördüğünüz olayın web sitenizde olmasını istiyorsanız aşağıdaki kodları web sitenize dahil etmeniz yeterli.

“Yukarı çık” linki;

<a href="#top" id="top-link">Yukarı çık</a>

CSS kodu;

#top-link	{ display:none; position:fixed; right:5px; bottom:5px; color:green; font-weight:bold; text-decoration:none; border:1px solid green; background:Lightgreen; padding:10px; }

Ve jQuery kodları;

//plugin
jQuery.fn.topLink = function(settings) {
	settings = jQuery.extend({
		min: 1,
		fadeSpeed: 200
	}, settings);
	return this.each(function() {
		//listen for scroll
		var el = $(this);
		el.hide(); //in case the user forgot
		$(window).scroll(function() {
			if($(window).scrollTop() >= settings.min)
			{
				el.fadeIn(settings.fadeSpeed);
			}
			else
			{
				el.fadeOut(settings.fadeSpeed);
			}
		});
	});
};

//usage w/ smoothscroll
$(document).ready(function() {
	//set the link
	$('#top-link').topLink({
		min: 400,
		fadeSpeed: 500
	});
	//smoothscroll
	$('#top-link').click(function(e) {
		e.preventDefault();
		$.scrollTo(0,300);
	});
});

//plugin
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() {
				//stupid IE hack
				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);
				}
			});
		});
	};

Referanslar;

jQuery topLink Plugin
jQuery.ScrollTo