Scroll to top animasi

by dibalik seo

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script>
//<![CDATA[
function resetScroller(e){var o=window.pageYOffset,n=document.getElementById(e).offsetTop,r=setTimeout("resetScroller('"+e+"')",speed);o>n?(scrollY=o-distance,window.scroll(0,scrollY)):clearTimeout(r)}var scrollY=0,distance=40,speed=24;
//]]>
</script>

<h2 id="myheading">JavaScript Smooth Animated Auto Scroll Tutorial</h2>
<div id="div1" class="contentbox">Div 1 content...</div>
<div id="div2" class="contentbox">Div 2 content...</div>
<div id="div3" class="contentbox">Div 3 content...</div>
<div id="div4" class="contentbox">Div 4 content...</div>
<span class="backtotop element-animation" onclick="return false;" onmousedown="resetScroller('myheading');"><i class="fa fa-chevron-circle-up fa-3x"></i></span>

CSS

div.contentbox {
	background: #FFF;
	height: 500px;
	margin: 20px;
	font-size: 28px;
	border: #CCC 1px dashed;
}
.backtotop{
  position:fixed;
    bottom:20px;
    right:20px;cursor:pointer
}
.element-animation{animation:animationFrames ease 1s;animation-iteration-count:1;transform-origin:50% 50%;animation-fill-mode:forwards;-webkit-animation:animationFrames ease 1s;-webkit-animation-iteration-count:1;-webkit-transform-origin:50% 50%;-webkit-animation-fill-mode:forwards;-moz-animation:animationFrames ease 1s;-moz-animation-iteration-count:1;-moz-transform-origin:50% 50%;-moz-animation-fill-mode:forwards;-o-animation:animationFrames ease 1s;-o-animation-iteration-count:1;-o-transform-origin:50% 50%;-o-animation-fill-mode:forwards;-ms-animation:animationFrames ease 1s;-ms-animation-iteration-count:1;-ms-transform-origin:50% 50%;-ms-animation-fill-mode:forwards}
@keyframes animationFrames{0%{opacity:0;transform:translate(-1500px,0)}
60%{opacity:1;transform:translate(30px,0)}
80%{transform:translate(-10px,0)}
100%{opacity:1;transform:translate(0,0)}
}
@-moz-keyframes animationFrames{0%{opacity:0;-moz-transform:translate(-1500px,0)}
60%{opacity:1;-moz-transform:translate(30px,0)}
80%{-moz-transform:translate(-10px,0)}
100%{opacity:1;-moz-transform:translate(0,0)}
}
@-webkit-keyframes animationFrames{0%{opacity:0;-webkit-transform:translate(-1500px,0)}
60%{opacity:1;-webkit-transform:translate(30px,0)}
80%{-webkit-transform:translate(-10px,0)}
100%{opacity:1;-webkit-transform:translate(0,0)}
}
@-o-keyframes animationFrames{0%{opacity:0;-o-transform:translate(-1500px,0)}
60%{opacity:1;-o-transform:translate(30px,0)}
80%{-o-transform:translate(-10px,0)}
100%{opacity:1;-o-transform:translate(0,0)}
}
@-ms-keyframes animationFrames{100%,60%{opacity:1}
0%{opacity:0;-ms-transform:translate(-1500px,0)}
60%{-ms-transform:translate(30px,0)}
80%{-ms-transform:translate(-10px,0)}
100%{-ms-transform:translate(0,0)}
}