JavaScript'e olan ilgimi, içeriklerimizden fark edebilirsiniz. Geçtiğimiz içeriklerimizde zaten JS kullanarak bir yukarı çık butonu hazırlamıştık. Ancak şimdi alternatif bir yöntem ile bir eklenti daha hazırlamaya, düzenlemeye çalıştım sizler için. İlgili eklentiyi Blogger, WordPress v.b. tüm altyapılarınızda sorunsuzca kullanabilirsiniz. Internet Explorer 11 dahil, tüm yeni nesil tarayıcılar ile uyumlu olarak çalışmaktadır. Aşağıdaki adımları izlemeniz bu yönde yeterli olacaktır.
AYRICA: JavaScript ile Tab Menü Yapalım
Tüm Tarayıcılar ile Uyumlu Yukarı Çık Butonu Yapımı
1) Temanızdaki aşağıdaki kodu bulun.
</body>
2) Aşağıdaki kodları ise, hemen üzerine ekleyin.
<style>
#onlyJSyc{
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
border: none;
outline: none;
background: url(http://4.bp.blogspot.com/-b50XKMWz84U/W9RouwhqVII/AAAAAAAAR_U/qQFXBOiUuQUC9Rv_evE4S7P9_yZ1YzZDgCK4BGAYYCw/s1600/yukari.png) no-repeat;
cursor: pointer;
padding: 0px;
width: 40px;
height: 40px;
}
</style>
<button onclick="topFunction()" id="onlyJSyc"></button>
<script>
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500)
document.getElementById("onlyJSyc").style.display = "block"
else
document.getElementById("onlyJSyc").style.display = "none"
}
function topFunction() {
if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
document.body.scrollTop -= 40
document.documentElement.scrollTop -= 40
setTimeout(function() {
topFunction()
}, 0)
} else {
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
}
}
</script>
Örnek Görünüm
Verdiğiniz bilgiler için çok teşekkür ederim
Merhaba,
Değerli yorumunuz için biz teşekkür ederiz.
reyis eyvallah sayende kodu direk yapıştırınca çalışıyor maşala
hocam sağolun işime yaradı ancak rengini nasıl değiştirebilirim ?
Teşekkürler
Teşekkürler