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 :

<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 :

.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 :

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");
});