WordPress jQuery ScrollTop Yapmak

Bu aralar sitelerde lazım olan jQuery ile ScrollTop nasıl oluyor onu göstericem, gördüğünüz gibi benim bloğumda aşağı inince yukarı çıkmak için sağda bir ikon var. Bu jQuery (sadece bir kaç satır kod) ile yapmak çok basittir. Scrollbar üst konumda belli bir değeri büyükse denetler, ardından haşırt diye aşağıdan ScrollTop çıkıyor. Üzerine tıkladığınızda tekrar üste çıkıyorsunuz, ya ne gereksiz şey diyenler olabilir 😀 ama biliyorsunuz üşengeç bir insanız yok topu kaydırda yukarı çıksında vs.. neyse koda geçmeden önce dikkat ederseniz, bloğumdaki demoda ufakta olsa bir efekt var yani sade basit bişey değil, renk tonunu sitenize göre css ile ayarlarsınız üste doğru bir ikon var onu sitemdeki demodan alabilirsiniz.

#back-top {position: fixed;bottom: 30px;margin-left: -150px;}
#back-top a {width: 108px;display: block;text-align: center;font: 11px/100% Arial, Helvetica, sans-serif;text-transform: uppercase;text-decoration: none;color: #bbb;-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;}
#back-top a:hover {color: #000;}
#back-top span {width: 108px;height: 108px;display: block;margin-bottom: 7px;background: #ddd url(http://www.ugurozer.com/wp-content/themes/ugur/images/up-arrow.png) no-repeat center center;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;}
#back-top a:hover span {background-color: #777;}

Yukarıdaki kodu style.css’te uygun biyere koyduktan sonra geçiyoruz javascript kodumuza. Bu arada jquery.min.js dosyanızı kendi sitenize yüklerseniz daha hızlı verim alırsınız çünkü bazen bekletiyor, ama yok direk böyle istersenizde sorun yok.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>

Bunuda header.php ye koymakta yarar var yani en azından bende öyle yukarıda gördüğünüz “.scrollTop() > 100” değeri var o mousenin dönüş turu olarak düşünün yani 200 yaptığınızda biraz daha aşağı inince görünür.

ve sırada asıl sitemizde görünecek kod.

<p id="back-top">
<a href="#top"><span></span>Yukarı Çık</a>
</p>

Bunuda yine header.php yada footer.php’ye koyuyoruz, Yukarı çık yazısını istemiyorsanız sadece “Yukarı Çık” yazısını kaldırmanız yeterli olacaktır. Diğer css ayarlarını vs.. yaparsınız umarım, hadi kolay gelsin.