Cara membuat tombol Back To Up

Perkiraan artikel ini membutuhkan Menit dengan membaca Kata.

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;

CHECK DEMO