Scroll To Top

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 appended=!1,bookmark2=document.createElement("div");bookmark2.id="backtotop",bookmark2.innerHTML='<span class="ani-dur ani-name" onclick="return false;" onmousedown="resetScroller(&quot;myheading&quot;);"><i class="fa fa-chevron-circle-up fa-3x"></i></span>',onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;e>600?appended||(document.body.appendChild(bookmark2),appended=!0):appended&&(document.body.removeChild(bookmark2),appended=!1)};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>

CSS

div.contentbox {
	background: #FFF;
	height: 500px;
	margin: 20px;
	font-size: 28px;
	border: #CCC 1px dashed;
}
#backtotop{
  position:fixed;
    bottom:20px;
    right:20px;
}
.ani-dur{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;animation-duration:1s}
@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.9)}
100%{-webkit-transform:scale(1)}}
@-moz-keyframes bounceIn{0%{opacity:0;-moz-transform:scale(.9)}
100%{-moz-transform:scale(1)}}
@-ms-keyframes bounceIn{0%{opacity:0;-ms-transform:scale(.9)}
100%{-ms-transform:scale(1)}}
@keyframes bounceIn{0%{opacity:0;transform:scale(.9)}
100%{transform:scale(1)}}
.ani-name{-webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-ms-animation-name:bounceIn;animation-name:bounceIn}