Go up go down button (anti mainstream)

MurliCyber 2/28/2014 Css3 , Javascript , Original post , Tutorial blog Comment

Yeay,hoaaaaaaaaaaaaaaaaaaaam udah lama nihh gak share trick trick blogger lagi udah ngebet banget pingin post padahal,tapi ketahan dengan kesibukan gw TRYOUT lagi hari ini,dan kemarin kemain gw sibuk juga dengan less dan kesibuk juga waktu menyelesaikan template ini,jadi yaaa gitu dehh jarang post

okay,kali ini gw akan bahas tentang back top,udah gak asing lagi kan di telinga kalian?

biasa nya kan back to top nya cuma tombol ke atas doank? nahh kali ini ada tombol kebawah nya juga jadi yaaa biar beda gitu dehh,untuk demo nya silahkan liat template gw sekarang? keren kann

yukk langsung pasang

1.cari kode ]]></b:skin>

2.letakkan kode di bawah ini di atas kode tadi

#GoToDown {background:#fff;text-align:center;position:fixed;top:13px;right:10px;z-index:999;cursor:pointer;width:30px;height:20px;padding:5px;border-radius: 2px;}
#GoToDown:before {content: "";position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:20px 15px 0 15px; border-color:#333 transparent transparent transparent; line-height:0;}
#GoToDown:hover:before {content: "";position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:20px 15px 0 15px; border-color:#888 transparent transparent transparent; line-height:0 }
#GoToDown:after {content: "";position:absolute; top:5px; right:11px; width:0; height:0; border-style:solid; border-width:12px 9px 0 9px; border-color:#fff transparent transparent transparent; line-height:0;}

#BounceToTop {
background: #888;
text-align: center;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
width: 30px;
height: 20px;
padding: 5px;
display: none;
border-radius: 2px;
}
#BounceToTop:before {
content: "";
position: absolute;
bottom: 5px;
right: 5px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 20px 15px;
border-color: transparent transparent #fff transparent;
line-height: 0;
}
#BounceToTop:after {
content: "";
position: absolute;
bottom: 5px;
right: 11px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 9px 12px 9px;
border-color: transparent transparent #888 transparent;
line-height: 0;
}

3.lanjut,letakkan kode di bawah ini di atas kode </body>

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); });
var $elem = $('body');
$('#GoToDown').click(function () {
$('html, body').animate({scrollTop: $elem.height()}, 4000);
$('#GoToDown').fadeOut()
});
$('#BounceToTop').click(function () {
$('#GoToDown').fadeIn()
});
});
</script>
<div id='BounceToTop'/>
<div id='GoToDown'/>

4.simpan template kamu

gampang kan?