JQuery İle “Yukarı Çık” Buton Uygulaması
Bir web sitesine Scrollbar aşağıya doğru kaydıkça sitenin üst kısımlarına dönmeyi kolaylaştıracak “Yukarı Çık” butonu koymak iyi fikir gibi geliyor.Hem sitenin üst kısımlarını kullanıcıya hatırlatacaktır hem de görünmeyen üst kısımlarda slayt vs. gibi değişken haberler bu buton vesilesiyle daha verimli kullanıcı ilgisine maruz kalacaktır.
Bu yazımda sizlere paylaşacağım JQuery kodları ile bu işlemi animasyonlu bir şekilde gerçekleştirebileceğiz.
<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>
Yukarıdaki JQuery kodu sayesinde “Yukarı Çık” butonumuzun işlevselliğini ayarlamış bulunmaktayız.
Şimdide “Yukarı Çık” butonumuzun görsel tasarımını CSS ile ayarlayalım.
#top {
bottom: 5px;
bottom: 20px;
display: none;
height: 100px;
position: fixed;
right: 20px;
}
Son olarakta butonumuzun HTML kodlarını yazalım.
<div id="top">
Yukarı Çık<br />
<img width="50" height="50" src="yukaricik.png" />
</div>
Evet işlemimiz bu kadar.Bu işlemlerin derlenmiş halini aşağıda yayınlamakta fayda var.
<!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>
Yaptığımız bu uygulamayı buradan çalışır bir vaziyette inceleyebilirsiniz.
İyi çalışmalar…
Paylaşımınız için teşekkür ederim.
Faydalandıysanız ne mutlu kardeşim.
Güzel yorumun için ben teşekkür ederim.
Teşekkür ederim. Bir projemde kullandım.
İyi Çalışmalar..
İşinizi görmenize sevindim Aykut Bey…Güzel yorumunuz için asıl ben teşekkür ederim.
Peki bunu popup olarak nasil ayarlayabiliriz ? Yani asagi inince o buton belirecek ama tiklayinca da popup acilmasini saglayacagiz
link ekliceksin resme
Teşekkür ederim
Çok teşekkür ediyorum, gerçekten işime yaradı.
Teşekkürler
Teşekkürler
Teşekkürler
Teşekkürler