Jquery ile ilk uygulamayı yapmaya başlayalım. Günümüzde çoğu sitede yer alan yukarı çık butonunu görmüşsünüzdür. Bu buton sayesinde kullanıcı kaydırma çubuğunu kullanmadan sayfanın en başına çıkabilir. Burada birkaç parça kod ile kullanıcıyı animasyonlu bir şekilde yukarıya çıkarmayı nasıl yapacağınızı göstereceğim. Butonu ister normal link ile isterseniz resim ile yapabilirsiniz. Tasarım tamamen size ait. İlk önce jquery ile yapılan kod kısmına bakalım.
<script type="text/javascript">
$(function() {
$("#top").click(function() {
$("html,body").stop().animate({ scrollTop: "0" }, 1000);
});
});
$(window).scroll(function() {
var uzunluk = $(document).scrollTop();
if (uzunluk > 300) $("#top").fadeIn(500);
else { $("#top").fadeOut(500); }
});
</script>
Bu kısımda işlev bölümünü hallettik. Şimdi tasarımı yani css kısmını halledelim. Tasarım dediğim gibi size kalmış. Artık görünümü halletmeye başlayabiliriz.
#top {
bottom: 5px;
bottom: 20px;
display: none;
height: 100px;
position: fixed;
right: 20px;
}
Bu bölümden sonra html kodlarını da devreye sokacağız. Basit anlamda bir html kod parçası yazdım.
<div id="top"> Yukarıya Çık<br /> <img width="50" height="50" src="butonresmi.jpg" /> </div>
Bunları doğru bir şekilde sayfaya yerleştirdikten sonra sorunsuz bir şekilde buton çalışacaktır. Şimdi son olarak bu güzel uygulamanın son halini paylaşayım. Direk sayfaya entegre edip kullanmaya bakın.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#top").click(function () {
// Sayfamızı kaydıracak olan kod burasıdır.
$("html,body").stop().animate({ scrollTop: "0" }, 1000);
});
});
$(window).scroll(function () {
var uzunluk = $(document).scrollTop();
if (uzunluk > 300) $("#top").fadeIn(500);
else { $("#top").fadeOut(500); }
});
</script>
<style type="text/css">
#top {
bottom: 5px;
bottom: 20px;
display: none;
height: 100px;
position: fixed;
right: 20px;
}
</style>
</head>
<body>
<div id="top">
Yukarı Çık<br />
<img width="50" height="50" src="yukaricik.png" />
</div>
</body>
</html>
Eyvallah kardeşim ufak bir yazı sorunu vardı hallettim sorunsuz bir şekilde çalışıyor. güzel de bir resim buldum. Bu kodların bir de tam olarak hangi kısma ekleneceğini yazsaydınız daha iyi olabilirdi. Ama yine de bu işle uğraşan birisi bunu bilmesi gerekiyor. iyi çalışmalar.