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.