Tavsiye: Google Belgeseli – Türkçe (Bir Başarı Hikâyesi) Hatırlayalım: Lizzie Velasquez: Gerçek Bir Mücadele Öyküsü
Fatih Özel Kolej

JavaScript ile Yukarı Çık Butonu Yapalım

Sponsorlu Bağlantılar

JavaScript ile Yukarı Çık Butonu Yapalım1 haftadır sadece JavaScript kullanarak yukarı çık butonu yapmaya çalışıyorum. Ancak birçok hazır eklenti tarayıcı uyumsuzluğunu beraberinde getirdi. Son olarak düzenlediğim küçük bir eklenti ile; Chrome, Firefox, Opera, Safari, Microsoft Edge, IE 11 ve Vivaldi Browser gibi birçok tarayıcı ile uyumlu bir yukarı çık butonu hazırlamayı başardım. jQuery hiç kullanılmadı ve saf JavaScript ile hazırlandı. Arzu ederseniz elbette CSS kodlarını kendinize göre biçimlendirebilmektesiniz.

AYRICA: JavaScript ile Güncel Tarihi Ekrana Yazdıralım

JavaScript ile Yukarı Çık Butonu Yapalım

1) Temanızda aşağıdaki kodu bulun.

</body>

2) Aşağıdaki kodları da, yukarıdaki koddan önce ekleyin.

<style>
#backtotop{
position:fixed;
bottom:20px;
right:20px;
background: url(http://4.bp.blogspot.com/-HXzJySdtrec/W9CNV5CSucI/AAAAAAAAR-o/qjlLYjjd52MasVTqz7HpuaX-8v3nvht9QCK4BGAYYCw/s1600/icons8-launch-80.png) no-repeat;
width:80px;
height:80px;
z-index: 9999;
visibility:hidden;
cursor:pointer;
}
</style>
<div id="backtotop"></div>
<script>
window.addEventListener('load', function () {
window.addEventListener('scroll', function () {
if (window.pageYOffset > 1000) {
document.getElementById('backtotop').style.visibility = 'visible';
document.getElementById('backtotop').style.display = 'block';
} else {
document.getElementById('backtotop').style.display = 'none';
document.getElementById('backtotop').style.visibility = 'hidden';
}
}, false);
document.getElementById('backtotop').addEventListener('click', function () {
var docu_scroltop = window.pageYOffset;
var setInt = setInterval(function () {
if (docu_scroltop <= 0) {
clearInterval(setInt);
} else {
window.scroll(0, docu_scroltop -= 100);
}
}, 10);
}, false);
}, false);
</script>

Not: Arzu ederseniz, yukarı çık butonunu CSS kodlarından değiştirebilirsiniz.

Örnek Görünüm

JavaScript ile Yukarı Çık Butonu Yapalım

Sponsorlu Bağlantılar


Teknobeyin Facebook
Sayfasını Bugün Beğenin!
  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.
Bugün Günlerden: . Toplam 19 kategorideki 7.874 yazıda 8.172 yorum bulunmaktadır.
Yukarı Çık