Script Tombol UP ini sering digunakan oleh para blogger dan situs-situs besar. Gunanya untuk mempermudah Pengunjung untuk kembali ke atas. Sebenarnya menurut saya ini jarang sekali dipakai cuman hanya untuk hiasan blog. Tetapi apabila konten Artikel di blog anda sangat panjang mungkin tombol ini berguna bagi pengunjung.
CSS3
.cd-top {
background-color: #D35400;
bottom: 0px;
color: rgb(255, 255, 255);
display: inline-block;
font-size: 18px;
line-height: 24px;
position: fixed;
opacity: 0;
right: 0px;
text-align: center;
text-decoration: none;
-webkit-transform: scale(5) translate(47px,-10px);
-moz-transform: scale(5) translate(47px,-10px);
-o-transform: scale(5) translate(47px,-10px);
-ms-transform: scale(5) translate(47px,-10px);
transform: scale(5) translate(47px,-10px);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
visibility: hidden;
white-space: nowrap;
width: 100%;
}
.cd-top.cd-is-visible, .no-touch .cd-top:hover {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.cd-top.cd-is-visible {
opacity: 0.9;
-webkit-transform: scale(1) translate(0px,0px);
-moz-transform: scale(1) translate(0px,0px);
-o-transform: scale(1) translate(0px,0px);
-ms-transform:scale(1) translate(0px,0px);
transform: scale(1) translate(0px,0px);
visibility: visible;
}
.cd-top.cd-is-visible:hover {
color: rgb(255, 255, 255);
opacity: 1;
}
.cd-top:hover {
text-decoration: none;
}
.cd-top .fa {
padding: 25px 25px;
}
.cd-top span:last-child {
padding: 25px 8px;
}
@media (min-width: 768px) {
.cd-top {bottom: 90px;
width: auto;
right: -145px;
}
.cd-top:hover {
right: 0px;
}
.cd-top .fa {
border-right: 1px solid #D35400;
}
}
Script jQuery (taruh dibawah footer)
<a href="#0" class="back-to-top cd-top"><span class="fa fa-chevron-up"></span> <span>Kembali ke atas</span></a><script>
$(window).scroll(function() {
($(this).scrollTop() > ($('header').height() + 200)) ? $('.back-to-top').addClass('cd-is-visible') : $('.back-to-top').removeClass('cd-is-visible cd-fade-out');
}).trigger('scroll');
$(window).resize(function() {
var right = (($(window).width() - $('section').width())/2)+95;
if ($('nav.sidebar').hasClass('affix')) {
$('nav.sidebar').css('right', right+'px');
}
}).trigger('resize');
$('.back-to-top').on('click', function(event) {
event.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
</script>
Semoga bermanfaat. sumber : webmaster-ucoz.ru
View: 1789
Rate: 5.0 / 1
Artikel Terbaru
Solusi gagal kirim sms verifikasi Aktivasi Mobile Banking
Solusi mengatasi gagal kirim sms verifikasi Aktiva...
Weedo Dropship Tas Wanita Import dari Batam
Cari Dropship tas wanita import di weedo saja, ber...
Apa Penyebab Suara Rekaman Mic BM 800 Kecil, cara mengatasinya?
Penyebab Suara Mic BM 800 Grafiknya kecil di AudaC...
Bandros Dropship terbaik di Indonesia, Benarkah?
Bandros salah satu dropship terbaik di Indonesia d...
Aplikasi terbaik pembersih dan mempercepat smartphone android
Masalah smartphone menjadi lemot atau berat sehing...