Sayfalarını takip ettiğim blogcu arkadaşlarımın ekserisi, Blogger'in kontrol panelinde kullanıcılarına sunduğu blog temalarını kullanmaktalar. Bu blog temalarında "YUKARI ÇIK" komutu bulunmamaktadır. Ben sayfama ekledim, örneğini benim sayfamdan izleyebilirsiniz.
Özellikle tek sayfa bloglarda, sayfanın alt kısımlarındayken en üst kısma çıkmak için düşünülmüş, küçük ama işe yarar bir işlevi olan bu butonu sayfamıza ekleyerek kullanıcılara daha rahat bir kullanım imkanı sağlayabiliriz. Gelelim bu küçük ama bir o kadarda işlevsel butonun hazır HTML kodunu, temamızın HTML'yi düzenle komutu ile komutlar arasına yerleştirmeye.
![]() |
| İKİNCİ İŞLEM |
![]() |
| YEDİNCİ İŞLEM |
<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>



























