¿Cómo redirigir a una sección particular de una página usando HTML o jQuery?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *