Bu örneği birçok web sayfasında görmüşsünüzdür. İlk önce örneğini görmek için tıklayın. Örneği gördüğümüzde konuyu daha rahat anlayacağız. Sayfa uzunlamasına aşağıya doğru gider. Ama kullanıcı başa dönmek istediğini de sürekli yukarı (scroll) çıkması gerekmektedir. Bir buton yardımı ile bu işi kısaltalım. Bu örneğimizde JQuery kullanarak sayfa başına çıkacağız.
İlk olarak html iskeletimizi oluşturalım.
Sayfamızda Scroll görünmesi için Div etiketlerinin içerisi dolduralım.
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div> <!-- sayfamızı scroll gösterilinceye kadar veriler ile dolduralım --> </div> <p class="totop"> <a id="top"> <img src="https://icons.iconarchive.com/icons/saki/nuoveXT/48/Actions-arrow-up-icon.png"> </a> </p> </body> </html>
“Yukarı çık” butonumuzu Css ile özellştirelim
Css ile “Yukarı çık” butonumuzu sağ tarafa sabitleyelim ve özelleştirelim.
.totop a { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; cursor: pointer; }
Ve son butona tıklandığında JQuery ile animasyonla yukarı çıkalım
Sayfa aşağıya kaydığında butonumuzu gösterelim ve tıklama özelliğini özelleştirelim.
$(function(){ $('#top').click(function () { $('body,html').animate({ scrollTop: 0 }, 600); return false; }); $(window).scroll(function () { if ($(this).scrollTop() > 15) { $('.totop a').fadeIn(500); } else { $('.totop a').fadeOut(500); } }); });
Bu şekilde sayfa en başında iken buton görünmeyecek aşağıya doğru gelindiğinde ile buton görünecek.Ve butonu muza tıklandığında sayfa animasyonlu olarak yukarıya kadar çıkacaktır.
Herkese kolay gelsin 🙂
hocam zamanlayıcısını nereden ayarlıyoruz
rakamsal gördüğün yerler zamanlayıcıdır
fadein
fadeout
üzerinde değiştirerek deneyin iyi alıştırma olacaktır
Teşekkürler
Rica ederim 🙂