Navigasi tombol Back To Up akan sedikit membantu untuk Blog atau Website dengan konten Panjang kebawah. Dengan tombol ini otomatis kita akan langsung kembali ke atas halaman situs. Membuatnya tidaklah sulit, kalian hanya perlu mengikuti langkah ini untuk instal di blog atau website kalian, Silahkan Ikuti langkahnya :
CSS (Code Stylesheet)
.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: rgba(48, 103, 238) url(https://www.pubindo.com/demo/9-26-2016/backtoup/cd-top-arrow.svg) no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
opacity: .5;
}
.no-touch .cd-top:hover {
background-color: #e86256;
opacity: 1;
}
@media only screen and (min-width: 768px) {
.cd-top {
right: 20px;
bottom: 20px;
}
}
@media only screen and (min-width: 1024px) {
.cd-top {
height: 60px;
width: 60px;
right: 30px;
bottom: 30px;
}
}
Tambahan:
Apabila ingin menjadi Lingkaran silahkan tambahkan code di bawah .cd-top { awal :
border-radius: 40px;
Untuk Mengubah warna silahkan ganti kode backgroud di .cd-top :
background: rgba(rgba(48, 103, 238) url(https://www.pubindo.com/demo/9-26-2016/backtoup/cd-top-arrow.svg) no-repeat center 50%;
Javascript
Tempatkan kode ini di atas </body> atau footer bagian blog atau website kalian.
<a href="#0" class="cd-top">верх</a>
<script>
jQuery(document).ready(function($){
var offset = 300,
offset_opacity = 1200,
scroll_top_duration = 700,
$back_to_top = $('.cd-top');
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
if( $(this).scrollTop() > offset_opacity ) {
$back_to_top.addClass('cd-fade-out');
}
});
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});
});
</script>
Tambahan :
// Tombol akan menjadi tembus pandang saat digulir kebawah "UP"
var offset = 300,
// Jumlah piksel setelah tombol digulir akan meningkatkan transparan
offset_opacity = 1200,
// waktu yang scroll
scroll_top_duration = 700;
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...