Muchas veces, en nuestro sitio web queremos desplazarnos automáticamente a una sección de la página web cuando hacemos clic en un botón o un encabezado en una barra de navegación o una lista. Entonces, para lograr este desplazamiento automático al elemento requerido, necesitamos la ayuda de jQuery . Usando jQuery, podemos lograr esto de una manera muy simple. Pero primero debemos comprender dos métodos, a saber, scrollTop() y offSet() en jQuery.
método scrollTop(): ayuda a obtener la posición vertical actual de la barra de desplazamiento del primer elemento, en el conjunto de todos los elementos coincidentes.
método scrollTop(): se utiliza para establecer la posición vertical de la barra de desplazamiento en el valor ‘val’.
Método offSet(): se utiliza para obtener las coordenadas del primer elemento en el conjunto de todos los elementos coincidentes.
Ejemplo 1: este ejemplo describe cómo desplazar un elemento específico usando jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js"
integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
<title>
How to scroll to specific
item using jQuery?
</title>
<style>
div {
color: #0f9d58;
border: 3px solid #0f9d58;
width: 200px;
height: 100px;
overflow: auto;
}
p {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="demo">
<h1>Heading</h1>
<p>paragraph</p>
</div>
<script>
var container = $('div');
var scrollTo = $('p');
// Calculating new position of scrollbar
var position = scrollTo.offset().top
- container.offset().top
+ container.scrollTop();
// Setting the value of scrollbar
container.scrollTop(position);
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, veremos cómo desplazarse a diferentes secciones de la página haciendo clic en diferentes botones, junto con un efecto de desplazamiento.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js"
integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
<title>
How to scroll to specific
item using jQuery?
</title>
<style>
div {
color: #0f9d58;
border: 3px solid #0f9d58;
margin: 10px;
width: 200px;
height: 100px;
overflow: auto;
}
p {
width: 300px;
height: 300px;
}
button {
margin: 10px;
}
</style>
</head>
<body>
<div class="demo">
<h1>Heading</h1>
<p id="p1">paragraph 1</p>
<p id="p2">paragraph 2</p>
</div>
<button onclick="scrollParagraph1()">
paragraph 1
</button>
<button onclick="scrollParagraph2()">
paragraph 2
</button>
<script>
var container = $('div');
// Scrolls to paragraph 1
function scrollParagraph1() {
var scrollTo = $("#p1");
// Calculating new position
// of scrollbar
var position = scrollTo.offset().top
- container.offset().top
+ container.scrollTop();
// Animating scrolling effect
container.animate({
scrollTop: position
});
}
// Scrolls to paragraph 2
function scrollParagraph2() {
var scrollTo = $("#p2");
// Calculating new position
// of scrollbar
var position = scrollTo.offset().top
- container.offset().top
+ container.scrollTop();
// Animating scrolling effect
container.animate({
scrollTop: position
});
}
</script>
</body>
</html>
Producción:
Cuando se hace clic en el segundo botón, el resultado es el siguiente.
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por parasmadan15 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA