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

Blok kemudian tekan tombol Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.! Bagi yang mau repost ulang harap untuk mencantumkan tautan/sumber!..

Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

Artikel relevan lainnya
Beri Komentar