Ruslan_xDD,
Decode,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex">
<title> - jsFiddle demo</title>
<style type='text/css'>
html, body {
height: 3000px;
}
#totop {
position: fixed;
bottom: 10%;
right: 10%;
background: red;
width: 50px;
height: 50px;
cursor: pointer;
opacity: 0;
transition: all 0.5s linear;
visibility: hidden;
}
#totop.show {
opacity: 1;
visibility: visible;
}
</style>
<script>
window.onload = function() {
var toTop = document.getElementById("totop"),
toTopIsVisible = false,
duration = 1000,
play = false;
window.onscroll = function() {
if (window.pageYOffset > document.documentElement.clientHeight != toTopIsVisible) {
toTopIsVisible = !toTopIsVisible;
toTop.classList.toggle("show", toTopIsVisible)
}
};
function circ(a) {
return 1 - Math.sin(Math.acos(a))
}
function makeEaseInOut(b) {
return function(a) {
return .5 > a ? b(2 * a) / 2 : (2 - b(2 * (1 - a))) / 2
}
}
var circEaseInOut = makeEaseInOut(circ);
toTop.onclick = function(e) {
if (play) return;
play = true;
var d = performance.now();
var from = window.pageYOffset;
window.requestAnimationFrame(function foo(a) {
var a = (a - d) / duration;
1 < a && (a = 1);
a = circEaseInOut(a);
window.scrollTo(0, from - from * a);
if (a == 1) {
play = false;
// console.log(performance.now() - d)
} else window.requestAnimationFrame(foo)
});
return false
}
};
</script>
</head>
<body>
<a href="#" id="totop"></a>
</body>
</html>