Come creare collegamenti a sezioni nella stessa pagina in HTML

Ancora

I collegamenti ipertestuali vengono utilizzati da un browser Web per spostarsi da una pagina all'altra. Tuttavia, puoi anche spostarti in un'altra area della stessa pagina. Le seguenti sezioni mostrano agli utenti come collegarsi alla parte superiore, inferiore o specifica di una pagina Web. Scegli un metodo dal seguente elenco o esplora entrambe le opzioni.

Utilizzando #top o #bottom

Gli esempi seguenti usano #top e #bottom con il tag <a> e l'attributo href per creare un collegamento a quella sezione della pagina. Questo metodo è simile all'utilizzo di "id", ma non è necessario selezionare un elemento specifico. Fai clic su "In alto" o "In basso" nella sezione Risultati per vedere cosa succede.

Esempi

<a href="#top"> In alto </a>

<a href="#bottom"> Bottom </a>

risultati

Top

Parte inferiore

Utilizzando il selettore ID

Nel CSS "id" è un selettore che può essere utilizzato per designare un'area a cui dovrebbe puntare un collegamento, simile all'ancoraggio in HTML. La cosa bella dell'uso di id è che puoi creare un collegamento a qualsiasi elemento della pagina, piuttosto che solo all'inizio o alla fine. Nelle sezioni seguenti vedrai come applicare l'id a un tag HTML e quindi come collegarlo. Questo esempio rimanda al paragrafo di apertura nella parte superiore di questa pagina.

Usa il selettore #id

<P id = "apertura"> I collegamenti ipertestuali vengono utilizzati da un browser Web per spostarsi da una pagina all'altra … </p>

Crea un collegamento al selettore

<a href = "# apertura"> Portami al paragrafo iniziale. </a>

Risultato

Portami al paragrafo iniziale.