Un lien « Retour en haut » dynamique

Les petits boutons « Retour en haut », on les aime tous. Généralement, il s'agit d'une simple `div` en `position: fixed`. En voici un qui n'apparait qu'arrivé à un certain pourcentage de la page, et qui s'arrêtre gracieusement juste au-dessus du `footer`.

Le code HTML est on ne peut plus simple :

lang-html

<div class="relative">
	<div class="toTop">
		<a href="#top" title="Retour en haut">
			Retour en haut
		</a>
	</div>
</div>
<footer id="footer">
…
</footer>

Le code CSS :

lang-css

.relative {
	position:relative;
}

.toTop {
	display:none;
	position:fixed;
	right:20px;
	bottom:20px;
	z-index:1000;
}

Voilà, nous avons un lien, mais il n'apparait pas pour le moment. On ajoute un peu de jQuery :

lang-javascript

function toTop(element,footer){
	var scroll = $(window).scrollTop();
	var maxScroll = $(window).height() * 0.4;

	if(scroll > maxScroll)
		$(element).show();
	else
		$(element).hide();


	if($(element).offset().top + $(element).height() >= $(footer).offset().top - 10)
		$(element).css('position', 'absolute');
	if($(document).scrollTop() + window.innerHeight < $(footer).offset().top)
		$(element).css('position', 'fixed');
}	

$(window).scroll(function() {
	toTop('.toTop',"#footer");
});

$(window).resize(function() {
	toTop('.toTop',"#footer");
});

----

Permaliens :