Linkedin Instagram Facebook Twitter Mail Youtube Whatsapp

jQuery ile Yukarı Çık Butonu Yapımı

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="https://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>
 

Bir Yorum Yaz