<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>
