JQUERY İLE YUKARI ÇIK BUTONU EKLEME

Merhabalar sevgili Weeb Tasarım takipçileri. Bu yazımızda sizlere JQuery ile Yukarı Çık Butonu yapımını anlatacağız. Özellikle One Page (Tek Sayfa) sitelerde, sayfanın alt kısımlarındayken en üst kısma çıkmak için düşünülmüş küçük ama işe yarar bir işlevi olan bu butonu sayfamıza ekleyerek kullanıcılara daha rahat bir kullanım sağlayabiliriz. Gelelim bu küçük ama bir o kadarda işlevsel butonun yapımına… Altta vermiş olduğumuz JQuery kodları sayesinde “Yukarı Çık” butonumuzun ayarlamasını yapmış bulunuyoruz.

 

$(document).ready(function () {

        $(window).scroll(function () {

            if ($(this).scrollTop() > 100) {

               $('.scrollup').fadeIn();

               } else {

                  $('.scrollup').fadeOut();

               } });

$('.scrollup').click(function () {

     $("html, body").animate({

         scrollTop: 0

     }, 600);

      return false;

      });

});

 

Yukarı Çık butonumuzun ayarlamalarını yaptığımıza göre şimdide görsellik konusunu aradan çıkaralım. Yukarı Çık Butonumuzun görsel tasarımını CSS ile ayarlayacağız. Hemen altta örnek CSS kodlarını yazıyoruz. Dilerseniz üzerinde oynama yapabilirsiniz.

.scrollup {

width: 40px;

height: 40px;

position: fixed;

bottom: 50px;

right: 100px;

display: none;

text-indent: -9999px;

background: url('icon_top.png') no-repeat;

background-color: #000;

}

 

Sonrasında HTML kodlarını yazıyoruz.

<h1>Top of the page</h1>

<article style="height: 1000px">

    <p style="margin-bottom: 600px">Scroll down the page&hellip;</p>

    <p>Then click the box.</p>

    <a href="#" class="scrollup">Scroll</a>

</article>

HTML kodlarını da yazdığımıza göre artık çalıştırabiliriz. Bu tarz bilgileri daha iyi öğrenebilmek kendinizi web tasarım konusunda profesyonelleştirmek için Weeb Akademi sayfasını ziyaret edebilir. Eğitim hakkında bilgi alabilirsiniz.