• 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>
    
    « Lecteur video JwPlayerModif couleurs par visiteur »

    Tags Tags : , , , , , ,
  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


Version standard

Poursuivre l'affichage en version standard (ordinateur),

cliquer ci-dessous

Clic ici

(Puis fermer cette fenêtre, en haut à droite)

Cet article vous a plu ?
Abonnez-vous !!!

Newsletter