http://learn.javascript.ru/play/k47MBb
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body, html {
height: 2000px;
}
.go-up {
border: 20px solid transparent;
border-bottom-color: #333;
bottom: 20px;
opacity: 0;
position: fixed;
right: 10px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
visibility: hidden;
z-index: 100;
}
.go-up.go-up-show {
opacity: 0.9;
visibility: visible;
}
.go-up.go-up-show:hover {
cursor: pointer;
opacity: 1;
}
</style>
</head>
<body>
<div class="go-up" title="UP"></div>
<script type="text/javascript">
var goUpElem = document.querySelector('.go-up'),
goUpHidden = true;
window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop >= 500 == goUpHidden) {
goUpElem.classList[goUpHidden ? 'add' : 'remove']('go-up-show');
goUpHidden = !goUpHidden;
}
};
goUpElem.onclick = function() {
window.scrollTo(0, 0);
};
</script>
</body>
</html>