mintik

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