İ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;
}