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

Sayfayı

Şü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,
  });
});

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-09-22 tarihinde yayınlandı,Toplam 1389 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...