Método 1: usando HTML:
Uno puede usar la etiqueta de anclaje para redirigir a una sección particular en la misma página. Debe agregar «atributo de identificación» a la sección que desea mostrar y usar la misma identificación en el atributo href con «#» en la etiqueta de anclaje. De modo que al hacer clic en un enlace en particular, será redirigido a la sección que tiene la misma mención de identificación en la etiqueta de anclaje.
Sintaxis:
//anchor tag <a href="#home_section">home</a> <section id="home_section">Information About Page</section>
Ejemplo : cuando el usuario haga clic en el enlace «Contáctenos», será redirigido a la «sección Contáctenos» en la misma página.
<!DOCTYPE html>
<html>
<head>
<style>
div{
width :100%;
height:400px;
border : 1px solid black;
}
</style>
</head>
<body>
<h2>Welcome to GeeksforGeeks</h2>
<p>This is the example of <i>Redirect
to a particular section using HTML on same page</i>
</p>
<a href="#contactUs"> Contact Us </a>
<br/></br>
<div>
<h2>Home section</h2></h>
</div>
<div>
<h2>About Us section</h2>
</div>
<div id = "contactUs">
<h2>Contact Us section </h2>
</div>
<div>
<h2>Team Section</h2>
</div>
</body>
</html>
Salida:
vista de tamaño de ventana completa:
Cuando el usuario haga clic en el enlace «Contáctenos», el usuario será redirigido a la «sección de contacto».
Vista de tamaño de ventana completa:
Método 2: Usando JQuery:
El método scrollTop() establece o devuelve la posición de la barra de desplazamiento vertical para los elementos seleccionados.
Nota: cuando la barra de desplazamiento está en la parte superior, la posición es 0.
Sintaxis:
$(selector).scrollTop(position)
Para redirigir a una sección en particular usando JQuery:
Sintaxis:
<a href="#" id="home">home</a>
$('#home').click(function(){
$(document).scrollTop(100) // any value you need
});
Ejemplo: cuando el usuario hace clic en el enlace «Contáctenos» presente en la parte inferior de la página, será redirigido a la «Sección de inicio» en la misma página.
<!DOCTYPE html>
<html>
<head>
<script>
$("#contactUs").click(function(){
// any value you need
$(document).scrollTop(600)
});
</script>
<style>
div{
width :100%;
height:400px;
border : 1px solid black;
}
</style>
</head>
<body>
<h2>Welcome to GeeksforGeeks</h2>
<p>This is the example of <i>Redirect
to a particular section using Jouery
on same page</i> </p>
<div>
<h2>Home section</h2></h>
</div>
<div>
<h2>About Us section</h2>
</div>
<div>
<h2>Contact Us section </h2>
</div>
<div>
<h2>Team Section</h2>
</div>
<br>
<a href="#" id="contactUs"> Contact Us </a>
</body>
</html>
Salida: El enlace Contáctenos está en la parte inferior de la página:
Vista de tamaño de ventana completa:
Cuando el usuario haga clic en el enlace Contáctenos, el usuario será redirigido a los 600 px superiores a la «Sección de inicio».
Vista de tamaño de ventana completa:
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 deepak710agarwal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA