Şimdi arkadaşlar sitemde back to top için bir görsel kullanıyorum. Başka bir sitede hareketli gif gördüm. Ben bunu siteme entegre ediyorum fakat oradaki gibi yukarı dön butonuna geldiğimde kuş kanat çırpmıyor :)
Biri yardımcı olabilir mi?
Benim css dosyam
a#scroll-top {
display: none;
position: fixed;
right: 20px;
bottom: 20px;
height: 42px;
width: 42px;
line-height: 42px;
background: #131517 url(../images/scroll-top.png) center center no-repeat;
opacity: 0.8;
-moz-opacity: 0.8;
-webkit-opacity: 0.8;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
}
O java kullanmış birde java kodu
<script>function goster(btn,elem){var id=document.getElementById(elem);if(id.style.display=="block"){btn.value="Çözümü Göster"; id.style.display="none";}else{btn.value="Çözümü Gizle"; id.style.display="block";}}function gosterAll(){var i;for (i=1; i < 11; i++){var id=document.getElementById("coz"+i); id.style.display="block";}}$(function(){$("#bitir").click(function( event ){event.preventDefault(); $('#clock').countdown('pause'); calculate();gosterAll();$(window).scrollTop('0');});}); $(document).ready(function(){$('.scrollToTop').hover( function (){$('.scrollToTop').css('background', 'url(http://www.xxxxx.com/images/gototop.gif) no-repeat 0px 35px'); $('.scrollToTop').css('text-decoration', 'none');}, function (){$('.scrollToTop').css('background', 'url(http://www.xxxx.com/images/gototop.png) no-repeat 0px 35px');});});</script>
css kodu
.scrollToTop{
width:80px;
height:100px;
padding:10px;
text-align:center;
font-weight: bold;
font-size:12px;
color: #444;
text-decoration: none;
position:fixed;
bottom: 140px;
right:40px;
display:none;
background: url('../images/gototop.png') no-repeat 0px 35px;
z-index:100;
}
.scrollToTop:hover,.scrollToTop:focus{
text-decoration:none;
background: url('../images/gototop.gif') no-repeat 0px 35px;
}
Hadi tüm bunları geçtim. Kuşu ekledim sorunsuz bir şekilde kanat çırpmıyor :) Yani normalde png uzantılı resim görülmeli. Üzerine geldiğinde .gif uzantısı çalışmalı sizler daha iyi bilirsiniz.
js de ekledim heada ama beceremedim.
