Yukarı çık buttonu eklentisi
Siteniz için yukarı çık buttonu bu eklenti eminimki her tasarımda oluyor ama bazı temalarda olmuyabiliyor ve bu eklentiyi arıyan arkadaşlarımız var sanırım :) bana bir kaç kez kullandığım temanın yukarı çık buttonunu soran olmuştu ve bende bugün yazim dedim ne zamandır konuda yazamıyordum grip yüzünden biraz kendime gelince bunu konu olarak ekliyim dedim belki işinize yarıyabilir.
Bu eklentiyi yabancı bir sitede gördüm öncelikle onuda söyleyeyim. Şimdi kodlarımızı nasıl ekliyices onuda anlatalım
öncelikle <head> ve </head> kodlarının arasına aşağıdaki kodu ekliyices
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>2. ci olarak css kodlarını ekliyoruz ]]></b:skin> bu kodu bulup ve üstüne aşağıdaki css kodlarını ekliyoruz
.smoothscroll-top {
position:fixed;
opacity:0;
visibility:hidden;
overflow:hidden;
text-align:center;
z-index:99;
background-color:#2ba6e1;
color:#fff;
width:47px;
height:44px;
line-height:44px;
right:25px;
bottom:-25px;
padding-top:2px;
border-radius:5px;
transition:all 0.5s ease-in-out;
transition-delay:0.2s;
}
.element:before {
content: "\f000";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
/*--sesuaikan sebagai tambahan--*/
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 10px;
left: 0;
}
.smoothscroll-top:hover {
background-color:#3eb2ea;
color:#fff;
transition:all 0.2s ease-in-out;
transition-delay:0s;
}
.smoothscroll-top.show {
visibility:visible;
cursor:pointer;
opacity:1;
bottom:25px;
}
.smoothscroll-top i.fa {
line-height:inherit;
}
3. son işlem olarak jQuery kodunu ekliyices </body> kodunu buluyoruz üstüne aşağıdaki kodu ekliyoruz
<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type="text/javascript">
//<![CDATA[
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.smoothscroll-top').addClass('show');
} else {
$('.smoothscroll-top').removeClass('show');
}
});
$('.smoothscroll-top').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>
Etiketler: Blogger Eklentileri, Css ve Html
8 Yorum:
Teşekkürler
kendi default temasında denedim olmadı
temadan kaynaklıyor olabilir başka temalarda deneyin birde
bende oldu da var olan yukarı çık butonum zaten varmış iki tane oldum tüh ne etcem şimdi :D
kodlarda ufak bir hata varmış sayenizde konuyu tekrar düzenlemiş oldum :) hangisi sizin hoşunuza giderse onu kullanırsınız
şimdi yapamıyorum ama :D o zaman yapabilmiştim şimdi temam giti tekrar yapayım dedim olmadı iyimi :D nasip
alla alla neden olmadı acaba birde ben denim bakalım kodlardamı bi sorun var acaba
çalışıyor sizin sitenizi incelediğimde bi yukarı çık buttonu vardı sanırım onu kaldırmışmıydınız
Yorum Gönder
Kaydol: Kayıt Yorumları [Atom]
<< Ana Sayfa