html - para - Navegar al ancla en otra página

href html ejemplos

Question

Simplemente quiero navegar de una página a un punto específico en otro

Tengo una página de inicio con cuatro secciones.

<section>
   <a name="section1"></a>
</section>

<section id="section2">

</section>

<section>
   <a name="section3"></a>
</section>

<section id="section4">

</section>

Las secciones 2 y 4 aparecen en cada página, por lo que mi navegación se ve así:

<nav>
      <ul>
        <li><a href="index.html#section1">ABOUT</a></li>
        <li><a href="#section2">APARTMENTS</a></li>
        <li><a href="index.html#section3">LANDLORDS</a></li>
        <li><a href="#section4">CONTACT</a></li>
      </ul>
</nav>

Los enlaces no están navegando a la página de índice o la sección deseada de la página de índice.

Gracias por adelantado.

Ahora tengo

<section>
       <a name="section1"></a>
    </section>

    <section id="section2">

    </section>

    <section>
       <a name="section3"></a>
    </section>

    <section id="section4">

    </section>

y mi navegación:

<nav>
      <ul>
        <li><a href="#section1">ABOUT</a></li>
        <li><a href="#section2">APARTMENTS</a></li>
        <li><a href="#section3">LANDLORDS</a></li>
        <li><a href="#section4">CONTACT</a></li>
      </ul>
</nav>

Todavía no está funcionando

Answer 1

¿Estás seguro de haber colocado los archivos en el mismo directorio? He probado el código que me has proporcionado y está funcionando. Sin embargo, puedes probar esto (una forma diferente de darle a las secciones una identificación):

<section>
    <a id="section1">
        CONTENT
    </a>
</section>

Si ha hecho esto, solo use la misma forma de vincular:

<a href="different-page.html#section1">Section One</a>

Answer 2

Creo que se enfrenta a este problema con Legacy Browser (IE8 y abajo). Porque lo he probado en Firefox, Chorm e IE9. Está funcionando bien. Pero falló en el navegador heredado.

Para eso tienes que usar la etiqueta de anclaje en lugar de div id.

Ejemplo:

<a name="section1"></a>
<section>section content goes here </section>

<a name="section2"></a>
<section>section content goes here </section>

<a name="section3"></a>
<section>section content goes here </section>

<a name="section4"></a>
<section>section content goes here </section>

Ahora puede usar cualquier nombre de clase que desee para sus elementos de sección ...

Answer 3

Necesita una etiqueta de nombre, consulte http://www.w3schools.com/tags/att_a_name.asp

Answer 4

Compruebe su código de JavaScript para la línea que dice "event.preventDefault ();"

Encontré esto en una plantilla de bootstrap de w3school que incluía este comando como parte de un bloque que crea un bonito desplazamiento hacia el hashtag. Una vez que lo comenté, los enlaces funcionaron bien.