Sayfayı yukarı kaydırma kodu, yukarı çık çapası

REKLAM
siteneyukarı-çık-çapası-ekle Şüphesiz internet sitelerinin en çok kullandığı uygulamalardan bir tanesidir mouse ile buton yada linklere tıklandığında sayfanın yukarı doğru hızlı bir şekilde kayması. Şuan kullandığım temamda da aynı özellik bulunuyor. Özellikle çok uzun sayfalarda ziyaretçiler için oldukça faydalıdır. Kendime alışkanlık edindiğim için  bazı sitelerde gezinirken sayfanın en altına geldiğim anda yukarı çıkma butonlarını arar dururum.  Kimileri web sitenin en altına ekler kimileri de sayfa aşağı kaydığında görünen ve sayfa ile beraber aşağı yukarı doğru kayan şekilde eklerler. Sayfayı el ile aşağı indirdiğinizde buton görünür tekrar yukarı çıktığınızda buton kaybolur. jQuery scrollUp eklentisi de böyle bir örneği sitenizde kullanmanıza yarıyor. Kullanım
  • Head etiketleri arasına eklemeniz gereken bölümler.
Js dosya adresleri : 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="src/jquery.scrollUp.js"></script>
 Css : 
<style>
#scrollUp {
 bottom: 20px;
 right: 20px;
 padding: 10px 20px;
 background: #555;
 color: #fff;
}
</style>
Javascript :  Basit kullanım :
<script>
$(function(){
 $.scrollUp();
});
</script>
Gelişmiş kullanım :
$(function () {
 $.scrollUp({
 scrollName: 'scrollUp', // Element ID
 topDistance: '300', // 300px aşağı inince buton görünsün
 topSpeed: 300, // Yukarı çıkma hızı
 animation: 'fade', // Fade, slide, none
 animationInSpeed: 200, // Animasyon hızı (ms)
 animationOutSpeed: 200, // Animasyon durma hızı (ms)
 scrollText: 'Scroll to top', // Yazı ekleme
 activeOverlay: false,
 });
});
yanit +0 yanıt
report Bildir

elian bu paylaşım hakkındaki görüşlerini merak ediyor.

Topluluğa katılmak ister misin?

Paylaşım yapmak ve etkileşime geçmek için giriş yapmalısın.
Kategoriler
Bu içeriği paylaş
Hazırlanıyor...

🏆 En iyiler

Yükleniyor...