jQuery ile Smooth Scroll

Bazen sitenin en altından yukarı ya da belirli bir anchor üzerine link verdiğimde çat diye gitmesine sinir oluyorum. Blog için bununla ilgili bir eklenti buldum ancak kodlarını hiç incelemedim. Neyse diğer projelerimin birinde de böyle bir sorun olunca az birşey araştırdım. Güzel bir kod buldum. Aşağıda sizinle paylaşacağım jQuery kodu ile aşağıya/yukarıya doğru kayma efekti verebilirsiniz bu tip linklere.

Kod

Gerek var mı bilmiyorum ancak ben gene hatırlatayım. Bu javascript kodunu kullanmadan önce jquery eklemelisiniz sisteminize. Kodun içine ekliyorum ben kodu.

jQuery kodunu çağırırken aşağıdaki linkin başına ve sonuna script kodlarını ekleyin. Ben her ihtimale karşı değiştirdim çünkü alan adını.


// HTML Alanı:
<h1 id="yukari">Lorem Ipsum</h1>
<p><a href="#yukari" class="ustlink">Yukarı Dön</a></p>

//Script Alanı
<abc type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></abc> 
//abc yi script ile değiştirin

<abc type="text/javascript"> //abc yi script ile değiştirin
$(document).ready(function() {

	$("a.ustlink").click(function() {
		$("html, body").animate({
			scrollTop: $($(this).attr("href")).offset().top + "px"
		}, {
			duration: 500,
			easing: "swing" //linear veya swing kullanılabilir
		});
		return false;
	});

});
</abc> //abc yi script ile değiştirin

Yukarıdaki kod ile birlikle easing efektinin linear ve swing efektlerini kullanabilirsiniz. Eğer jQuery Easing efektini eklemek isterseniz jQuery Easing sayfasından gerekli bilgiyi alıp kullanabilirsiniz.

Hadi Selametle

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir