Tolga GönüL : 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>

Demo

Tolga GönüL

Yukarı çık buttonu eklentisi

About author: Tolgagnl

8 yorum: