Son Yazılar:
Yükleniyor...

Wep Siteniz İçin Eklentisiz ve Basit Yukarı Çık Butonu

Temanızın Style.css Dosyasını Açın vereceğim kodları ekleyin

#scroller {
  display: block;
  width: 150px;
  position: fixed;
  right: -35px;
  bottom: 280px;
  z-index: 999;
  padding-bottom: 7.5px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  cursor: pointer;
  }
  #scroller .b-top-but {
  font-size: 12px;
  font-family: Roboto-Bold;
  color: #fff;
}
 #scroller .b-top-but {
  font-size: 12px;
  font-family: Roboto-Bold;
  color: #fff;
}
 
#scroller::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
}

 

Daha sonra </body> tagından hemen önce alttaki java kodlarını ekleyin. 

 

<script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery(window).scroll(function () {if (jQuery(this).scrollTop() > 0) {jQuery('#scroller').fadeIn();} else {jQuery('#scroller').fadeOut();}});
            jQuery('#scroller').click(function () {jQuery('body,html').animate({scrollTop: 0}, 400); return false;});
        });
    </script>
</body>

 

Son olarak </footer> tagını bulun hemen sonrasına şu kodları ekleyin. Sitemde var. 

 

<div id="scroller" class="b-top" style="display: block;"><span class="b-top-but">Yukarı Çık </span></div>
   

6 Yorumlar

  1. çok teşekkür ederim acayip işime yaradı

    YanıtlaSil
  2. Adsız14:19:00

    emeğine sağlık güzel tasarım şekli.

    YanıtlaSil
  3. işinize yaradıysa sevindim.

    YanıtlaSil
  4. Adsız15:13:00

    bu kadar basit ve sade teşekkürler

    YanıtlaSil
  5. Adsız16:59:00

    güzel bilgi için teşekkürler

    YanıtlaSil

Yorum Gönder

Daha yeni Daha eski
Yukarı Çık