Cómo navegar a una sección de una página

Question

Tengo una página de inicio con enlaces. ¿Cómo puedo dirigir al usuario a una sección de una página diferente?

Página principal:

<a href="/sample">Sushi</a> 
<a href="/sample">BBQ</a> 

Página de ejemplo:

<div id='sushi'></div> 
<div id='bbq'></div> 

Al hacer clic en "sushi" o "barbacoa" en la página principal debe navegar por el usuario para el div con id sushi o bbq (respectivamente) de la página sample.

¿Es posible sin JQuery? No me importa usar JQuery, pero una solución más simple usando html también funcionaría.

Answer 1

uso de HTML anchors:

Página principal:

<a href="sample.html#sushi">Sushi</a> 
<a href="sample.html#bbq">BBQ</a> 

Página de ejemplo:

<div id='sushi'><a name='sushi'></a></div> 
<div id='bbq'><a name='bbq'></a></div> 

Answer 2

envolver su div con

<a name="sushi"> 
    <div id="sushi"> 
    </div> 
</a> 

y enlazar con él por

<a href="#sushi">Sushi</a> 

Answer 3

Use anclas.

Página principal:

<a href="/sample#sushi">Sushi</a> 
<a href="/sample#bBQ">BBQ</a> 

Página de ejemplo:

<div id='sushi'><a name="sushi"></a></div> 
<div id='bbq'><a name="bbq"></a></div> 

Answer 4

Es posible con HTML mediante el uso de anclas. Si desea mover el usuario a la sección específica, lea acerca de la etiqueta HTML 'a'.

W3Chools: 1 | 2

Answer 5

página principal

<a href="/sample.htm#page1">page1</a> 
<a href="/sample.htm#page2">page2</a> 

páginas de muestra

<div id='page1'><a name="page1"></a></div> 
<div id='page2'><a name="page2"></a></div> 

Answer 6

Utilice una llamada a través de la sección, funciona

<div id="content"> 
    <section id="home"> 
       ... 
    </section> 

llamada lo anterior, el thru

<a href="#home">page1</a> 

Desplazamiento necesita jquery pegar esto ... arriba para terminar la etiqueta de cierre del cuerpo ..

<script> 
    $(function() { 
     $('a[href*=#]:not([href=#])').click(function() { 
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
       var target = $(this.hash); 
       target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
       if (target.length) { 
        $('html,body').animate({ 
         scrollTop: target.offset().top 
        }, 1000); 
        return false; 
       } 
      } 
     }); 
    }); 
</script> 

Answer 7

Mis Soluciones:

$('body').scrollspy({target: '.target', offset: fix_header_height})

$('.target').click(function() { $('body').animate( { scrollTop: $($(this).attr('href')).offset().top - fix_header_height }, 500) return })