jQuery ile yukarı çık butonu nasıl yapılır?

Çok uzun başlığımda yazdığım gibi bu uygulamayı bir çok sitede görmüş ve merak ediyordum. Oradan oraya gezerken bir kaç güzel kaynak buldum. Normalde gözükmemesi ve sayfanın en altına indiğimizde fade efekti ile görünür olması sonra yine kaydırma çubuğunu yukarı kaldırdığımızda fade efekti ile yok olması göze çok hoş gelen bir özellik. Şimdi sizlere bir ingilizce kaynaktan çeviri yapıyorum.

1. adım: XHTML

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

İfademizi temamızın uygun bir yerine yerleştiriyoruz. a elementimize id olarak “top-link” atadık bunu kullanacağız.

2. adım: CSS

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

Yerini tarayıcıda sabitleyip, sağdan ve alttan 5px ittirdik, yazı rengi yeşil arka plan rengi açık yeşil ayarladık, altı çizili olmamasını ve kalın olmasını sağlayıp kenarlıkların her tarafından 10px kadar uzaklaştırdık.

3. adım: JS

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

jQuery ve scrollto pluginini sayfamızda çağırdıktan sonra (örneğin wordpress kullanıyorsak header kısmında çağırıyoruz) sayfamıza yukarıdaki kodu ekliyoruz. IE’de position:fixed; CSS ifadesi problem çıkardığından şunu da deneyebiliyoruz…

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

Scrollto pluginini indirmek için şu bağlantıyı takip edebilirsiniz.

[note_box]Kaynak: http://davidwalsh.name/jquery-top-link[/note_box]