A veces necesitamos que el usuario haga clic en un botón o enlace y lo lleve a un elemento presente en la misma página HTML. Además, esto debe llevar al usuario al elemento sin ninguna recarga. Muchas veces, los usuarios tienden a saltar al contenido principal, como en un sitio web de juegos. Es posible que quieran saltarse las instrucciones y quieran jugar el juego directamente. Entonces, básicamente, queremos desplazarnos a un elemento en particular o saltar al contenido.
En este artículo, aprenderemos cómo desplazarse a un elemento en particular o saltar al contenido solo en HTML simple y CSS .
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Scroll</title>
<style>
section:target {
border: 2px solid blue;
}
.links-container {
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="links-container">
<!-- The href attribute of anchor
tags point to the section IDs -->
<!-- Note that href has to point to IDs
and not to classes as IDs are
unique in HTML-->
<a href="#id1">Go to Section 1</a>
<a href="#id2">Go to Section 2</a>
<a href="#id3">Go to Section 3</a>
<a href="#id4">Go to Section 4</a>
</div>
<!-- We need to specify unique IDs for
each section/div/element we want
the user to scroll to -->
<section id="id1">
<h1>Section 1</h1>
</section>
<section id="id2">
<h1>Section 2</h1>
</section>
<section id="id3">
<h1>Section 3</h1>
</section>
<section id="id4">
<h1>Section 4</h1>
</section>
</body>
</html>
Salida: Nuestro HTML se verá así en una ventana del navegador.
Ejemplo 2: Avancemos ahora y agreguemos algunos estilos para que podamos colocar las secciones lejos unas de otras.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
/* Some basic styling for
testing our functionality */
.links-container {
display: flex;
justify-content: space-between;
}
.sections {
display: flex;
flex-direction: column;
place-items: center;
gap: 100rem;
}
</style>
</head>
<body>
<div class="links-container">
<!-- The href attribute of anchor
tags point to the section IDs -->
<a href="#id1">Go to Section 1</a>
<a href="#id2">Go to Section 2</a>
<a href="#id3">Go to Section 3</a>
<a href="#id4">Go to Section 4</a>
</div>
<!-- We need to specify IDs for each
section/div/element we want the
user to scroll to -->
<div class="sections">
<section id="id1">
<h1>Section 1</h1>
</section>
<section id="id2">
<h1>Section 2</h1>
</section>
<section id="id3">
<h1>Section 3</h1>
</section>
<section id="id4">
<h1>Section 4</h1>
</section>
</div>
</body>
</html>
Salida: ahora, cuando abrimos nuestro archivo HTML en un navegador, podemos ver la funcionalidad funcionando cuando hacemos clic en cualquiera de los enlaces, es decir, Ir a la Sección 1, Ir a la Sección 2, etc.
Aunque nos estamos saltando contenido, el comportamiento aún no es fluido. Puede observar que cuando hacemos clic en los enlaces, vamos directamente a la sección deseada. Pero también podemos hacer que se desplace suavemente a la sección deseada.
Para hacer esto, podemos usar la siguiente línea en nuestro código:
scroll-behavior: smooth;
Hay otros comportamientos de desplazamiento también definidos en HTML, puede ir aquí para obtener detalles sobre ellos. Aquí, usaremos un comportamiento suave . Aquí, usaremos el desplazamiento a la sección particular a la que queremos ir, simplemente haciendo clic una vez en el enlace.
El código final se verá así:
Ejemplo 3:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Scroll</title>
<style>
html {
/* This property makes the html
page to scroll smoothly */
/* If you want to directly move to the
section without scrolling, remove
this scroll-behavior property*/
scroll-behavior: smooth;
}
/* Some basic styling for testing
our functionality */
.links-container {
display: flex;
justify-content: space-between;
}
.sections {
display: flex;
flex-direction: column;
place-items: center;
gap: 100rem;
}
</style>
</head>
<body>
<div class="links-container">
<!-- The href attribute of anchor
tags point to the section IDs -->
<a href="#id1">Go to Section 1</a>
<a href="#id2">Go to Section 2</a>
<a href="#id3">Go to Section 3</a>
<a href="#id4">Go to Section 4</a>
</div>
<!-- We need to specify IDs for each
section/div/element we want the
user to scroll to -->
<div class="sections">
<section id="id1">
<h1>Section 1</h1>
</section>
<section id="id2">
<h1>Section 2</h1>
</section>
<section id="id3">
<h1>Section 3</h1>
</section>
<section id="id4">
<h1>Section 4</h1>
</section>
</div>
</body>
</html>
Salida: como puede ver en la salida, nos desplazamos suavemente a las secciones y también saltamos los contenidos.
