Ana içeriğe atla

HTML Sayfa Başı (Yukarı Çık) Kodu



Blogger Sayfa Başına Git (Yukarı Çık) Kodu


Web sayfalarında yada sitenin tamamında yukarı çık veya sayfa başına çık için kullanabileceğimiz güzel bir kod



<a href="#top">Sayfa Başı</a>


Resimli yukarı çık için

<a href="#top"><img src="YUKARI RESİM URL" /></a>



Butonlu yuları çık için

<a href="#top"><button>Yukarı Çık</button></a>



Butonlu yuları çık için Altı çizgili olması için

<button><a href="#top">Yukarı Çık</a></button>


Sayfa kenarında kayan yuları çık buronu için

<a style="display:scroll;position:fixed; bottom:75px; right:5px;" href="#" title="YUKARI ÇIK"><img src="YUKARI RESİM URL" /></a>


Bir örnek yapalım

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="https://2.bp.blogspot.com/-PWnljjLo4mo/ViYQDGuIWvI/AAAAAAAAOQM/z29v4LgC37E/s1600/top.gif" /></a>



Yukarı Çık Aşağıya İn Butonu


HTML / JAVASCRIPT EKLEMEK

Widget (gadget) olarak eklemek için :
Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.



* Canlı Demo için
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Editörünü kullanabilirsiniz.

Yorumlar

  1. Anonim26.11.13

    paylaşım için teşekkür ederim. bu arada sayfa başında iken butonu nasıl gizleyebiliriz.

    YanıtlayınSil
    Yanıtlar
    1. Kendim yazarım dersen hover efekti ile ouşturabilirsin yada
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src='http://www.weebly.com/uploads/1/5/7/6/15762290/yukari.js' type='text/javascript'></script>

      Sil
  2. Paylaşım için teşekkürler.. Faydalı bir site, yeni yazılımcıların yetişmesi için güzel bir hizmet sağlıyorsunuz...

    YanıtlayınSil

Yorum Gönderme

🔺 YUKARI ÇIK 🔺