Membuat Animasi Tombol Keatas Tanpa Jquery

Membuat Tombol Back to top/Keatas

Info [K-moe] - Tombol Back to top (ke atas) pada blog memang bagi sebagian blogger sangatlah penting karena dapat mempermudah visitor selain itu juga dapat mempercantik blog.Untuk membuatnya banyak sekali cara, Kali ini saya akan membahas tentang cara membuat tombol back to top (ke atas) dengan animasi menggulung tanpa Jquery.

Cara Membuat Animasi Tombol Keatas

1. Langkah pertama, login ke akun blogger anda.
2. Setelah itu masuk ke template
3. Demi keamanan dan kenyamanan anda backup dulu template anda.
4. Langkah berikutnya, letakkan kode berikut ini diatas kode ]]></b:skin> :
#keatas {
cursor: pointer;
width: 30px;
height: 30px;
position: fixed !important;
bottom: 0px;
right: 0px;
z-index: 999;
text-indent: -9999px;
border: 1px solid #676969;
background-color: #5A5A5A;
-webkit-box-shadow: inset 0 0 0 1px #FDFDFD,0 1px 3px black;
-moz-box-shadow: inset 0 0 0 1px #FDFDFD,0 1px 3px black;
box-shadow: inset 0 0 0 1px #FDFDFD,0 1px 3px black;
-moz-border-radius: 10px 0 0 0;
overflow: hidden;
padding: 0;
}
#keatas::after {
content: "";
display: block;
width: 0;
height: 0;
border-width: 10px 4px;
border-style: solid;
border-color: transparent transparent #C3D1D7 transparent;
position: absolute;
top: 0;
left: 11px;
}
#keatas:hover:after{border-bottom-color:white}
5. Masih di menu edit HTML, kemudian copy kode di bawah ini dan simpan di atas tag </body>

function scrollTo(element, to, duration) {
Math.easeInOutQuad = function(t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t * (t - 2) - 1) + b;
};
var start = element.scrollTop,
change = to - start,
currentTime = 0,
increment = 10,
animateScroll = function() {
currentTime += increment;
var val = Math.easeInOutQuad(currentTime, start, change, duration);
element.scrollTop = val;
if (currentTime < duration) {
setTimeout(animateScroll, increment);
}
};
animateScroll();
}
<a id="keatas" onclick="scrollTo(document.body, 0, 1000);scrollTo(document.documentElement, 0, 1000);">Ke atas&lt</a>
6. Save

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel