Mais um pouco sobre as ligações âncora Embelezando a coisa

Este artigo vem no seguimento de outros sobre O Elemento Âncora [a], e desta vez quero focar naquelas ligações internas, que servem para unir diferentes secções dentro da mesma página, e como as podemos tornar mais apelativas ao visitante... 8)
Relembrando o que escrevi no artigo mencionado acima:

    <a href="#exemploUM">Vai para algum local nesta mesma página</a>
    

Este é um link interno (ou âncora), e leva-te para um elemento existente dentro da mesma página onde colocamos a ID, que ser única, da seguinte maneira:

      <div id="#exemploUM"></div>
      

Podes colocar a ID para onde se dirige a ligação em qualquer elemento HTML, e a menos que lhe dês um estilo personalizado, este tipo de ligação apresenta-se tal como qualquer outro link.

HTML: O elemento âncora [a] - O atributo href

Então vamos ver como podemos dar aquele estilo extra a este tipo de ligações com 4 simples passos:

1. O efeito de rolagem suave

   Primeiro que tudo, vamos colocar uma pequena propriedade no CSS para criar um efeito de rolagem suave, animado, mais fluido e visualmente agradável em vez dum salto abrupto para o novo destino:

   html {
     scroll-behavior: smooth;
   }
          

   Como já tenho esta propriedade no CSS deste blogue há algum tempo, podes testar o efeito clicando em qualquer ligação com destino dentro da própria página, como por exemplo, a seta na lateral que te leva ao topo da página.

2. Evitando cortes de texto

   Se um cabeçalho fixo estiver presente, como é o caso neste blogue que tem um com 79px de altura, o conteúdo pode aparecer cortado ao rolar para o destino.
   Para evitar isso, além da ID para a ligação interna, inclui também uma class no elemento de destino e usa a propriedade scroll-margin-top para adicionar um espaço extra no topo:

   <b class="anchorLINK" id="efsmooth">O efeito de rolagem suave</b>
          

   .anchorLINK {
     scroll-margin-top: 95px;
   }
          

   1. Clica aqui para ires para a citação acima, que vai aparecer a 95px do topo para não aparecer com o texto cortado pelo cabeçalho fixo.
3. Estilizar os destinos de ligações âncora

   Podes utilizar a pseudo-classe CSS :target para dares um estilo ao elemento de destino duma ligação âncora dentro da mesma página:

   .anchorLINK:target {
     color: #af0; /* verde */
   }
          

   1. Clica aqui para ires para o ponto anterior desta lista, onde o título vai ter a cor verde.
      Volta atrás

   Nesta demonstração, ao clicares na ligação acima, vais ter ao destino onde vais ver o texto na cor verde.
   Ao clicares em Volta atrás vai fazer com que o título deixe de ser o alvo, pelo que o texto deixará de ser verde.

4. Estilizar os destinos de ligações âncora com mais sofisticação

   Podemos fazer coisas mais complexas com o atributo :target do que apenas alterar a cor do texto.
   Repara na seguinte demonstração que destaca áreas de conteúdo, enquanto mostra como animar a ligação Volta atrás para que deslize no lado esquerdo do ecrã.

   Pêras Laranjas Limões

   Pêras

   

   A pera é o fruto comestível da pereira, uma árvore do gênero Pyrus L., pertencente à família Rosaceae, e que conta com vinte variedades de espécies cultivadas em todo o mundo. A fruta pode ser consumida in natura, enlatada, em suco e desidratada.

   Laranjas

   

   A laranja é um fruto de várias espécies cítricas da família Rutaceae. Refere-se principalmente ao fruto da espécie Citrus × sinensis, que também é chamado de laranja-doce, para distingui-lo do relacionado Citrus × aurantium, referido como laranja-azeda.

   Limões

   

   O limão é uma fruta cítrica originária da Ásia, rica em vitamina C e antioxidantes, e amplamente utilizada na culinária para dar sabor a pratos doces, salgados e bebidas. Os seus benefícios incluem o fortalecimento do sistema imunitário, a ação antioxidante e a melhoria da digestão.

   Volta ao topo da demonstração

   Aqui está o HTML (abreviado) para mostrar como a demonstração anterior está configurada.
   E como o CSS (com comentários) é utilizado para apresentar e destacar cada secção ao clicar em cada ligação no cimo da demonstração para ir para cada secção relacionada.
   E também mostra como o CSS pode ser definido para mostrar/ocultar a ligação Volta ao topo da demonstração.

   HTML

   <nav id="nav">
     <a href="#peras">Pêras</a>
     <a href="#laranjas">Laranjas</a>
     <a href="#limoes">Limões</a>
   </nav>
         
   <article>
     <h1 id="peras">Pêras</h1>
     <img align="left" alt="peras.jpg" src=""/>
     <p></p>
   </article>
       
   
         
    <a class="gobacktest" href="#nav">Volta ao topo da demonstração</a>
          

   CSS

   /* Estilos das ligações de navegação no topo */        
   nav {
     display: flex;
     gap: 10px;
     }
   nav a { 
     flex-grow: 1;
     box-shadow: 0px 10px 14px -7px #3e7327;
     background: linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
     border-radius: 4px;
     border: 1px solid #4b8f29;
     color: #fff;
     font-family: Arial;
     text-align: center;
     padding: 10px 0;
     text-decoration: none;
     text-shadow: 0px 1px 0px #5b8a3c;
   }
   nav a:hover {
     background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
   }
   nav a:active {
     position:relative;
     top:1px;
   }
   /* Estilos dos tilulos de cada secção, que também servem de destino de cada ligação no topo */
   h1 {
     margin: 0 0 20px;
     scroll-margin-top: 100px;
     }
   h1#laranjas:target {/* Estilos do titulo da secção #laranjas */
     color: #ffa500;
     }
   h1#limoes:target {/* Estilos do titulo da secção #limoes */
     color: #f4e075;
     }
   h1:target {/* Estilos do titulo da secção #peras */
     color: #71a819;
     }
   article {/* Estilos de cada secção */
     margin-top: 60px;
     padding: 20px;
     border: 3px solid transparent; /* a borda é inicialmente transparente */
     border-radius: 10px;
     background-color: #fffc;
     }
   article img {/* Estilos da imagem em cada secção */
     width: 80px;
     margin-right: 10px;
     border: 4px double transparent; /* a borda é inicialmente transparente */
     border-radius: 8px;
   }
   article:has(h1:target) {/* Estilos da cor da borda da secção que fica verde quando o h1 de destino #peras está dentro dela */
     border-color: #71a819;
     }
   article:has(h1#laranjas:target) {/* Estilos da cor da borda da secção que fica laranja quando o h1 de destino #laranjas está dentro dela */
     border-color: #ffa500;
     }
   article:has(h1#limoes:target) {/* Estilos da cor da borda da secção que fica amarela quando o h1 de destino #limoes está dentro dela */
     border-color: #f4e075;
     }
   article:has(h1:target) img {/* Estilos da cor da borda da imagem que fica verde quando o h1 de destino #peras está dentro dela */
     border-color: #71a819;
     box-shadow: -15px 0 15px -15px #2C3E50, 15px 0 15px -15px #2C3E50;
     }
   article:has(h1#laranjas:target) img {/* Estilos da cor da borda da imagem que fica laranja quando o h1 de destino #laranjas está dentro dela */
     border-color: #ffa500;
     box-shadow: -15px 0 15px -15px #2C3E50, 15px 0 15px -15px #2C3E50;
     }
   article:has(h1#limoes:target) img {/* Estilos da cor da borda da imagem que fica amarela quando o h1 de destino #limoes está dentro dela */
     border-color: #f4e075;
     box-shadow: -15px 0 15px -15px #2C3E50, 15px 0 15px -15px #2C3E50;
     }
     /* Estilos da ligação "Volta ao topo da demonstração" */
   .gobacktest {
     font-size: 17px;
     font-weight: 500;
     line-height: 34px;
     text-align: center;
     /* A ligação está numa posição fixa no canto superior esquerdo. */
     position: fixed;
     top: 100px;
     left: 200px;
   
     /* A ligação aparece inicialmente meio transparente e deslocada para fora da margem esquerda do ecrã. */
     opacity: 0;
     translate: calc(-100% + 10px);
   
   /* duração da transição de meio segundo */
     transition: all 0.5s;
     
     /* forma da borda em redor da ligação */
     height: 35px;
     border: 1px solid red;
     border-right: none;
     width: fit-content;
   }
   
   .gobacktest:after {  /* triângulo no lado direito da forma */
     content: "";
     position: absolute;
     top: 4px;
     right: -13px;
     width: 25px;
     height: 25px;
     border: 1px solid red;
     border-left: none;
     border-bottom: none;
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     transform: rotate(45deg);
   }
   /* Quando o corpo do texto contiver um h1 de destino, a ligação aparecerá gradualmente e tornar-se-á visível */
   body:has(h1:target) .gobacktest {
     opacity: 1;
     translate: 0px;
     }
          

   Mostrar Mais

Ainda há mais coisas que se pode fazer com as ligações âncora e como podem ser utlizadas para fazer coisas incríveis, mas por agora fico por aqui. :D
No entanto caso tenhas curiosidade e queiras saber mais, recomendo o artigo (em inglês) que me inspirou a escrever este, e do qual traduzi muito do leram aqui: Anchor Links and How to Make Them Awesome

E por hoje é tudo. ;)

Até Breve. :-F

Queres ler outro artigo ao calhas?