Membuat Animasi Tombol Keatas Tanpa Jquery

Pada posting kali ini taukahbahwa.blogspot.com akan menyampaikan artikel tentang Membuat Animasi Tombol Keatas Tanpa Jquery. Semoga dengan berita Membuat Animasi Tombol Keatas Tanpa Jquery akan menambah wacana untuk anda pembaca setia taukahbahwa.blogspot.com

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.
Untuk lihat demonya silahkan coba klik tombol yang ada di bawah kanan blog ini. Perhatikan saat proses ke atas.
Bagaimana berminat? Silahkan ikuti caranya...
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> 

<script type="text/javascript">

//<![CDATA[

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();

}

//]]>

</script>

<a id="keatas" onclick="scrollTo(document.body, 0, 1000);scrollTo(document.documentElement, 0, 1000);">Ke atas</a>

6. Save

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com