Kategorileri Aç / Kapat

Sadece JavaScript Kullanarak Yukarı Çık Butonu Yapımı

Hadi şimdi BEĞEN butonuna tıklayarak Facebook sayfamıza katıl. Hoş geldin :)


Sadece JavaScript Kullanarak Yukarı Çık Butonu Yapımı
Aslında jQuery kullanarak bir yukarı çık butonu hazırlamak daha kolay gelebilir. Ancak ben nedense her konuda jQuery kullanmak yerine, salt JavaScript kullanarak da eklentiler geliştirilmesi gerektiğine inanıyorum. Bilirsiniz, birçok web sitesinde de "yukarı çık," butonu vardır. Siz de sitenize, sadece JavaScript kullanarak bir yukarı çık butonu ekleyebilirsiniz. Bunun için gerekli olabilecek tüm adımlar ve kodlar aşağıda yer almaktadır.

AYRICA: CSS ile İçinden Çizgi Geçen Yazı Yapımı (Responsive)

Sadece JavaScript Kullanarak Yukarı Çık Butonu Yapımı


1) JavaScript kodlarımız aşağıdaki gibidir.

<script type="text/javascript">
var timeOut;
function scrollToTop() {
if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
window.scrollBy(0,-300);
timeOut=setTimeout('scrollToTop()',10);
}
else clearTimeout(timeOut);
}
</script>

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

<style>
.yukariabiwrap{border:1px solid #374760}
.yukariabi a{line-height:48px;font-size:150%;color:#fff!important}
.yukariabi{height:48px;padding:0px;margin:2px;text-align:center;background:#374760}
</style>

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

<div class="yukariabiwrap">
<a href="#" onclick="scrollToTop();return false"><div class="yukariabi"><img src="http://2.bp.blogspot.com/-sBMxZy8k8eg/W-nYi2TnpXI/AAAAAAAASRU/x725Jh_eN7sIsQ6wm4X_RaSDBmCp91h-ACK4BGAYYCw/s1600/yukari.png"/></div></a>
</div>

Örnek Görünüm

Sadece JavaScript Kullanarak Yukarı Çık Butonu Yapımı

Beğendin mi? Beğen veya Paylaş butonlarına tıklayabilirsin. Teşekkürler :)

Hiç yorum yok: