Smooth Scroll Nedir ? Nasıl Kurulur ? Nasıl Kullanılır ?

Smooth Scrool Nedir ?

Smooth Scroll, tasarladığınız internet sitenizin menülerine tıkladığı zaman sizi ilgili bölüme fare kullanmadan aşağı kaydırarak aktarma işlemini sağlayan Javascript kütüphanesidir.

Smooth Scroll Nasıl Kurulur ?

Öncelikle Smooth Scroll dosyalarını indirmeniz gerekir indirmek için tıklayınız.

İndirdiğiniz dosyanın dist klasöründe bulunan “smooth-scroll.js” ve ya “smooth-scroll.min.js” dosyasını kendi internet sitenizin altındaki gerekli klasöre aktarıp bunu site dosyanızda çağırmanız gerekir çağırma işlemi için,

<script src=”dizin/smooth-scroll.min.js”></script>

ve ya

<script src=”dizin/smooth-scroll.js”></script>

bunları yazdıktan sonra sitenizin en altına şu kodları yazarak Scrool Smooth’un kurulumunu başarılı bir şekilde sağlamış oluyorsunuz.

<script>

var scroll = new SmoothScroll(‘a[href*=”#”]’);

</script>

Smooth Scroll Nasıl Kullanılır ?

Öncelikle varsayalım ki üst menünüzde şöyle bir menü var,

<a data-scroll href=”#section_id”>Menü</a>

ve id’si “section_id” olan kodlarımızda şöyle olsun,

<div id=”section_id”>

Aydın Can Altun – Bir Developer Bloğu

</div>

yukarıdaki kurulum işlemlerini tamamladıktan sonra Sitenizdeki “Menü” linkine tıkladığınız zaman siteniz otomatik olarak id’si “section_id” olan sayfaya aşağı ve ya yukarı doğru kaydırarak sizi ulaştıracaktır.

 

Açıkcası Scrool Smooth, benim internet sitesi tasarlarken kullanması hoşuma giden bir Javascript kütüphanesi ve sizin de kullanmanızı öneririm.

 

2 Comments

  1. merhaba dediklerinizi doğru bir şekilde yaptım çalışıyorda fakat footer kısmına geçerken mesela 0 saniye içinde gidiyor ben istiyorum ki yavaş yavaş gitsin yardımcı olurmusunuz

    • Aydın Can

      26 Haziran 2019 at 02:40

      Default olarak 300ms de tüm animasyon gerçekleşiyor

      var scroll = new SmoothScroll(‘a[href*=”#”]’); olan kodu şu şöyle bir değişiklik yaparsanız sorunuzun çözümüne ulaşacaksınız

      var scroll = new SmoothScroll(‘a[href*=”#”]’, {
      speed: 300
      });

      burada ki 300 sayısı 300 ms içerisinde tüm animasyonun gerçekleşeceğini temsil etmektedir. Ne kadar sürede geçmesini istiyorsanız o kadar süre girmeniz yeterli olacaktır.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir