jQuery ile Animasyonlu “Başa Dön” Butonu

Uzun sayfalar için oldukça önemli birşey bu “Başa Dön” bağlantısı. Sayfa uzadıkça sitenin yönlendirme bağlantılarından da uzaklaşılır. Bunları tekrardan kullanabilmek için sayfanın başına gitmek gerekir. Bunda da dikkat edilmesi gereken önemli bir konu var. Bu “Başa Dön!” bağlantısını insanların dikkatini dağıtmayacak bir yere koymalıyız. Yoksa ziyaretçilerin dikkatlerini dağıtıp içerikten uzaklaştırabilir.

Bağlantıya doğrudan “#” vererek de bu çözülebilir aslında. Ama amacımız çoğu zaman sitemizde değişik aksiyonların olması değil mi? Ayrıca diyez vermek bazı tarayıcılarda değişik sorunlara da sebep olabiliyor. Bunun için değişik eklentiler, değişik javascriptler mevcut. Ama kim böyle ufak bir özellik için sunucusuna yüklenmek ister? Ben de internette gezerken böyle basit bir işlem için kısa bir kod buldum: Animated scroll to anchor/id function with jQuery

Ancak biraz sorunlu. Opera’da düzgün çalışmıyor kod. Ben de birkaç ufak şey daha ekleyerek, ama kodu da uzatmayarak sorunu düzelttim.

Bu kodu kullanmak için jQuery kütüphanesini de kullanmanız gerekiyor.

İşte kod bu:

function goToByScroll(id) {
  var op = jQuery.browser.opera ? jQuery("html") : jQuery("html, body");
  op.animate({ scrollTop: jQuery("#"+id).offset().top }, 'slow');
}

Uygulamak için de bağlantınıza gidilecek yerin id‘sini goToByScroll(”) parantezinin içine vermemiz gerekir.

<a title="Başa Dön!" href="javascript:void(0);" onclick="goToByScroll('top');">Başa Dön!</a>

Canlı örneğini bu sayfanın sağındaki beyaz yeşil yukarı oku kullanarak görebilirsiniz.

Bunu sadece yukarı kaydırmak için kullanmak zorunda değilsiniz. Gideceğiniz yer aşağıda ise aşağıdaki yerin id‘sini vererek aşağıya da kaydırabilirsiniz.

Firefox 3.6, Safari 5, Chrome 5, Opera 10.61, IE7+ da denendi ve çalışıyor.

  • Hüseyin

    Teşekkürler. Ben de jQuery.scrollTo kullanıyordum. Bunu görünce hemen attım o eklentiyi 😀

  • oguzkir

    ben bunun farklı bir versiyonunu kullandım. fakat bir sorunum var.

    doctype bu;

    validate ettiğimde -there is no attribute “onClick”- hatası alıyorum. sanırım büyük küçük harf olayında problem var ama harfleri küçük yazarsam script çalışır mı acaba?

    • Sorunun ne olduğunu bulşussun ama yanlış yere bakıyorsun aslında. Validation’daki hata doğru. “onClick” diye bir “attribute” yok; “onclick” diye var. C’yi küçük yazarsan sorununun düzeleceğini düşünüyorum.

  • caner

    kardeşim bi demo verirmisin yapamadım da..

    • Sitenin sağ altındaki ok bu kodla çalışıyor. Demo niyetine ona bakabilirsin.

  • kemal

    Hocam çalıştıramadım ,fonksiyonu script tagları arasına yazdım bir div id si de verdim daha sonra alttaki link kodunuda altta bir div e ekledim açıltırdım olmadı. Nerede hata yapıyorum yardımcı olabilirmisin?

    • Örneğe şuradan bakabilirsin: http://jsfiddle.net/sevilyilmaz/FnNDF/

      jQuery’inin hangi sürümürünü kullanıyorsun? 1.9’dan itibaren $.browser metodunu kaldırdılar. Eğer böyle ise jQuery Migrate’i de kullanman gerekir; değilse konsoldan hangi hatayı aldığını söyleyebilir misin?