Bazı web sitelerinde sayfada aşağı doğru inerken genellikle sağ alt köşede yukarı butonu çıkar. Bu sayede ziyaretçi kaydırma çubuğunu yukarı taşıyarak değil, tek tuş ile sayfanın tepesine ulaşabiliriz. Çok fayda sağlamasa da bazen bazı siteler için oldukça işlevli olabilir ki böyle bir ihtiyacınız var ki muhtemelen bu konuyu okuyorsunuz.
O hâlde aşağıda örnek sayfayı inceleyin.
Eğer kodlar ihtiyacınız için uygunsa aşağıdan tamamını kopyalayarak kendi sayfanızda kullanabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" /> <title>jQuery - Sayfayı Kaydırırken Yukarı Butonu Gözükmesi</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <style type="text/css"> body { margin:0px; } .backToTop { display: none; width: 65px; line-height: 1.1; padding: 3px 0; background-color: #000; color: #fff; font-size: 14px; font-family: Century Gothic, sans-serif; text-align: center; position: fixed; _position: absolute; right: 10px; bottom: 40px; _bottom: "auto"; cursor: pointer; #opacity: 0.6; #filter: Alpha(opacity=60); text-align: vertical; } </style> <script type="text/javascript"> $(document).ready(function() { $("#backToTop").click(function() { $("html, body").animate({ scrollTop: 0 }, 700); // 700ms sonra sayfanın yukarısına ulaşma. }); } ); function backToTopFun(){ var st = $(document).scrollTop(), winh = $(window).height(); if (st > 300){ // Sayfanın tepesinden kaç piksel inildiğinde buton gözüksün? $("#backToTop").fadeIn(); $("#backToTop").html('YUKARI'); // Butonda yazılı olacak yazı } else { $("#backToTop").fadeOut(); } //IE6???? if (!window.XMLHttpRequest) { $backToTopEle.css("top", st + winh - 166); } }; $(window).bind("scroll", function () { backToTopFun(); }); </script> </head> <body> <div>Sayfa Başı</div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />Sayfa Sonu<br /> <div id="backToTop" class="backToTop"><a href="javascript:void(0)"></a></div> </body> </html> |
