Liens retour top/footer en js

Mettre des liens haut-de-page et bas-de-page, rien de plus simple....
Mais si on veut afficher ces liens après avoir scroller la page, c'est mieux et plus design.
Et au retour haut-de-page, Hop!...ces liens disparaissent.
On peut voir cette fonction sur les sites Wordpress, entre autres...!
On utilise un petit script javascript qui décompte le nombre de pixels pendant le scroll.
Et suivant la valeur imposée (400 pour 400px par exemple), les liens s'affichent selon le code CSS.
Ici les deux flèches Haut et Bas apparaissent à droite de la page, après le scroll.
On place tous les codes dans la zone de script......
Essayez de scroller jusqu'en bas de page .........

Voir les codes (HTML, CSS, JS)

Scroller en bas de page

Scroller en bas de page

Scroller en bas de page

Scroller en bas de page

Bas de page

Code CSS

#retour{
 display:block;
 position:fixed;
  top:500px;
  right:20px;
 opacity:0.1;
  transition:all 0.5s;
 }
 #retour a{
 display:none;
 }
 #retour.top a{
 display:block;
 }
 
#retour.top {
 opacity:1;
 box-shadow:6px 6px 10px grey;
 transition: all 2s;
 }
 #retour.top img {
 width:50px;
 height;50px;
 margin:2px;
 }

Code javascript

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
        document.getElementById("retour").className = "top";
    } else {
        document.getElementById("retour").className = "";
    }
}

Code HTML

<div id="retour">
<a title="Haut de page" href="#top">
<img src="http://ekladata.com/Xgyy5tl8uOndNtxoqbRItglnk7A.png" alt="" /></a>
<a title="Bas de page" href="#footer">
<img style="-ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);" src="http://ekladata.com/Xgyy5tl8uOndNtxoqbRItglnk7A.png" alt="" /></a>
</div>