Le Hollandais Volant

La version complète du coup :

HTML :

<div id="scr" class="scrollbutton"><a href="#" onclick="event.preventDefault(); window.scroll(0, targetOffset);"></a></div>

JS :

// FastScroll
// Initial state
var scrollPos = 0;
var targetOffset = 0;
var scr = document.getElementById('scr');

// adding scroll event
window.addEventListener('scroll', function(){ scrolling() });

// the function : compares the "new" scrolling state with the previous
// (this allows detecting either "up" or "down" scrolling)
// then saves the new in the $previous for the next iteration.

function scrolling() {
	if ((document.body.getBoundingClientRect()).top > scrollPos) {
		scr.classList.add('scrollbutton-top');
		targetOffset = 0;
	} else {
		scr.classList.remove('scrollbutton-top');
		targetOffset = 100000;
	}

	if ((document.body.getBoundingClientRect()).top > -500) {
		scr.classList.remove('scrollbutton-on');
	} else {
		scr.classList.add('scrollbutton-on');
	}

	scrollPos = (document.body.getBoundingClientRect()).top;
}

CSS :

/* Fast Scroll button -----------------------------------*/
#scr {
	background: url(icon_top.png) no-repeat center center;
	opacity: 0;
	width: 0px;
	height: 80px;
	position: fixed;
	z-index: 99;
	bottom: 0; right: 0;
	transition: opacity .5s linear, width 0s .6s linear;
	overflow: hidden;
}

#scr.scrollbutton-on {
	opacity: .3;
	width: 80px;
	transition: opacity .5s linear, width 0s linear;
}

#scr.scrollbutton-top {
	transform: rotate(180deg)
}

#scr a {
	width: 80px;
	height: 80px;
	position: fixed;
}

FILE (icon_top.png file) :

http://lehollandaisvolant.net/img/icon_top.png