Bu sitedeki her şey Sevgi ile kodlanmıştır.

Kategori Listesini Göster

JavaScript ve CSS ile Basit "Yukarı Çık" Bağlantısı Nasıl Yapılır?


FacebookTwitterPinterestTumblrYazdır


JavaScript ve CSS ile Basit "Yukarı Çık" Bağlantısı Nasıl Yapılır?İnternet üzerinde birçok yukarı çık bağlantısı yapımına yönelik anlatım mevcut. Bu kodlar genellikle, jQuery ile hazırlanmış olup, bir efekt ile ekranın en üstüne çıkılmasını sağlamaktadır. Ben ise sizlerle, yalnızca JavaScript ve CSS kullanılarak, herhangi bir efekt olmaksızın ve Internet Explorer dahil birçok tarayıcı ile uyumlu olan yukarı çık butonu yapımını anlatıyor olacağım. Aşağıda yer alan kodları, özellikle CSS olarak dilediğiniz şekilde biçimlendirerek, web sitenizde kolaylıkla kullanabilirsiniz.

AYRICA: JavaScript ile Cümle Sonuna Yeni Kelime Ekleyelim

JavaScript ve CSS ile Basit "Yukarı Çık" Bağlantısı Nasıl Yapılır?

1) JavaScript kodlarımız aşağıdaki gibi olacaktır.

<script>function topFunction() {document.body.scrollTop = 0;document.documentElement.scrollTop = 0;}</script>

2) HTML kodlarımız ise aşağıdaki gibi olacaktır.

<a onclick="topFunction()"><div style="cursor: pointer" class="yukaricik">Yukarı Çık</div></a>

3) CSS kodlarımız ise aşağıdaki gibidir.

.yukaricik {
background: #333;
color: #fff;
font-size: 20px;
padding: 15px;
width: 100%;
border-bottom: 5px solid #B42924;
}


  1. Yorum bulunmamaktadır.

Bu yazıya yorum göndermek ister misiniz?

Dikkat: Her yorum gönderen kişi, kendi gönderdiği yorumdan sorumlu olmaktadır.
Not: Yazı ile herhangi bir ilgisi bulunmayan yorumların onaylanmadığını belirtmek isteriz.
Yazı Etiketleri
Yukarı Çık