Jquery ile ” Yukarı Çık ” tuşu yapma
28 Eylül 2019 / 11:45
Burak
Merhaba arkadaşlar,
Aşağı doğru kayan veya çok fazla ürün listelemesi olan websitelerinde yukarı çık butonu gerekebiliyor bunun için aşağıdaki kodları kullanmanız yeterlidir.
Style dosyası
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#top { bottom: 5px; display: none; height: 100px; position: fixed; right: 20px; font-size:40px; color:#ea786a; cursor:pointer; opacity:0.5; transition:500ms; } #top:hover{ opacity:1; transition:500ms; } |
Jquery tarafı
|
1 2 3 4 5 6 7 8 9 10 |
$(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); } }); |
Html tarafı
|
1 2 3 |
<div id="top"> Yukarı Çık </div> |
Bir sonraki konuda görüşünceye kadar bol debuglu günler 🙂
Bu Yazılarıda Okuyabilirsiniz...
Bir cevap yazın