Ancre HTML

Utilité Icone animée pour inciter au scroll
Infos utiles Voir un exemple sur ce wiki : https://ancredessavoirs.fr/?Accueil

Lorsque la première section occupe tout l'écran et qu'il y a aussi du contenu plus bas, sous la ligne de flottaison, il peut être utile d'ajouter une icone qui permet de descendre dans la page pour consulter le contenu.
Exemple de code Le bouton qui renvoie vers une ancre plus bas dans la page :
{{button class="btn-link btn-icon icon-action" icon="fas fa-angle-double-down" link="#homepage" nobtn="1"  }}


L'ancre se déclare comme ceci avec l'id de votre choix ...
""<div id="homepage"></div>""


Et voici le css associé à coller dans PageCss
/* Animation de l'icone chevron sur home */
@keyframes scroll {

    0% { opacity: 0; }
    30% { transform: translateY(0); opacity: .5; }
    90% { transform: translateY(15px); opacity: 1;}
    100% { transform: translateY(20px); opacity: 0;}

}
.icon-action {
  font-size: 4em;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  width: fit-content;
  display: block;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}
Langage CSS
PDF