Jquery bildiğimiz üzere sayfalarıma hareket sağlayarak daha dikkat çekici sayfalar oluşturmamıza yardımcı olan bir kodlama türüdür. sayfa içeriğimize bir çok şekilde hareket sağlayabildiğimiz Jqyery ile yapabileceklerimizden bir tanesinde sayfamızda kaydırma çubuğu kullanmadan sayfa içerikleri arasında linklere tıklayarak gezinme olanağı sağlar. Page Scroll ile sayfa içeriklerine belirlediğimiz linkler yarımıyla bir tık ile ulaşabiliriz.
Bunu yapabilmemiz için Html5 kolaylıklarından faydalanabiliriz. Kod editörümüz ile tek bir sayfa açarak bu sayfa içerisibe istediğimiz kadar sayfa oluşturabilir ve Page Scroll ile de bu sayfalara kaydırma çubuğunu kullanmadan navigasyon linkleri ile ulaşabiliriz.
Önceden belirlediğimiz navigasyon linklerine gitmesini istediğimiz div tablo yada html5 in bize sunduğu yenilik olan section taglarının id isimlerini link olarak vererek işe başlamamız gerekmektedir.
örnek olarak Html 5 in yeniliklerinde göstermek adına html 5 ile gelen bazı tagları kullanalım bu taglar hakkında bilgileri diğer yazılarımızda bulabilirsiniz.
İlk olarak Html5 ile gelen yeni bir etiket olan <section></section> etiketi ile iki tane section oluşturalım. Bunlardan birini ana sayfamız olsun diğeri ise hakkımızda sayfamız. Daha sonra bu section'larımıza birer id verelim. Örneğimizde section'larımıza id olarak section1 ve section2 ismini verdik. kodlamamızdaki son durum şöyle olacaktır;
<section id="section1"></section>
<section id="section2"></section>
Daha sonra yönlendirme yapacağımız navigasyonumuzu oluşturacağımız ana sayfa ve hakkımızda yazılarını yazalım. Ana sayfa'ya tıklandığında gidilecek yer daha önceden belirlediğimiz section1 id'sini verdiğimiz section'umuzdur. Hakkımzda için ise section2'dir. Ana sayfa yazımıza <a href=""> etiketi ile yönlendirdiğimizde href kısmına #section1 yazarak yönlendirmemizi tamamlamış oluyoruz. Navigasyon için hazırladığımız kod örneği şu şekilde oluşmuş olmaktadır.
<nav>
<a href="#section1">ana sayfa</a> <a href="#section2">hakkımızda</a>
</nav>
Olarak bir navigasyon oluşturduğumuzu düşünelim. (<nav></nav> etiketi Html 5 ile gelen yeni bir etikettir.)
Sayfamız bu hali ile de hakkımızda linkine tıklandığında hakkımızda section'unu bize getirecektir. Fakat bir sayfada linklere tıkladığında yukarı yada aşağıya doğru sayfamızın kaymasını istediğimiz için sayfamıza eklememiz gereken Jquery Page Scroll kodlarını sayfamıza eklemeliyiz. Page Scroll kodlarını sayfamızın <head></head> tagları arasına eklememiz gerekecek. </head> tagını hemen üzerine aşağıdaki kodları yapıştırın.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');
// Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
$('a[href*=#]').each(function() {
// Ensure it's a same-page link
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
// Ensure target exists
var $target = $(this.hash), target = this.hash;
if (target) {
// Find location of target
var targetOffset = $target.offset().top;
$(this).click(function(event) {
// Prevent jump-down
event.preventDefault();
// Animate to target
$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
// Set hash in URL after animation successful
location.hash = target;
});
});
}
}
});
// Use the first element that is "scrollable" (cross-browser fix?)
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
});
</script>
Çalışan Örnek İçin Tıklayınız
Hiç yorum yok:
Yorum Gönder