Fonction retour en haut

Bonjour, j'ai mis un code sur mon site permettant d'avoir un bouton de retour en haut de page.
Seul soucis, j'aimerais que lors que l'on clique, ça nous amène lentement, du moins pas d'un coup. En gros, ça fait comme sur CCM mais moi ça me plait pas ^^
Mes codes :

<a href="#top" onclick="bScroll();"><img title="Retour en Haut" src="http://freenation.fr/wp-content/uploads/fleche-top.png" id="bScroll" border="0" style="position: fixed; opacity: 0; bottom: -40px; right: -40px; transition: 1s; -webkit-transition: 1s;" onmouseover="this.style.opacity='0.4';" onmouseout="this.style.opacity='1';"></a>

document.body.addEventListener("scroll", cScroll);
function cScroll () {
    if (parseInt(document.body.scrollTop)>=100) {
        //document.getElementById('bScroll').style.display = "block";
        document.getElementById('bScroll').style.opacity = "1";
        document.getElementById('bScroll').style.right = "0px";
        document.getElementById('bScroll').style.bottom = "0px";
    } else {
        //document.getElementById('bScroll').style.display = "none";
        document.getElementById('bScroll').style.opacity = "0";
        document.getElementById('bScroll').style.right = "-40px";
        document.getElementById('bScroll').style.bottom = "-40px";
    }
}
var tScroll;
function bScroll () {
$('html, body').animate({scrollTop : 0},800);
}

Que dois-je donc ajouter pour que lors qu'on clique ça nous amène lentement vers le haut (enfin pas d'un coup quoi) ?