2008-11-05 19 views
40

Considere el siguiente código:desplazarse mediante programación a una etiqueta de ancla

<a href="#label2">GoTo Label2</a> 
... [content here] ... 
<a name="label0"></a>More content 
<a name="label1"></a>More content 
<a name="label2"></a>More content 
<a name="label3"></a>More content 
<a name="label4"></a>More content 

¿Hay una manera de emular clic en el enlace "Ir a Label2" para desplazarse a la región correspondiente de la página a través de código?

EDIT: Una alternativa aceptable sería desplazarse a un elemento con una identificación única, que ya existe en mi página. Agregaría las etiquetas de anclaje si esta es una solución viable.

+0

pregunta similares http://stackoverflow.com/questions/6666038/asp-net-postback-scroll-to-specific-position –

Respuesta

71

Este JS ha trabajado generalmente bien para mí si también pone un ID en el elemento:

document.getElementById('MyID').scrollIntoView(true); 

Esto es bueno, ya que también se posicionará divs desplazables etc para que el contenido sea visible.

Mike.

+0

gracias Mike esto es en realidad exactamente lo que estaba buscando! – Anders

+1

Esto es genial, Mike, ¡muchas gracias! –

2

supongo que esto va a funcionar:

window.location="<yourCurrentUri>#label2"; 
0

puede simplemente abrir la nueva dirección URL con el nombre adjunto, por ejemplo http://www.mysite.com/mypage.htm#label2

En Javascript,

location.href = location.href + '# label2';

+0

¿No sería esta ruptura si se ejecuta más de una vez? http://www.mysite.com/mypage.htm#label2#label2 – EndangeredMassa

11

uso de JavaScript:

window.location.href = '#label2'; 

Si tiene que hacerlo desde el servidor/código detrás, sólo puede emitir este Javascript y registrarlo como un script de inicio para esa página.

+0

Esto funcionó muy bien para mí, aún podía usar un anclaje. Control de Webbrower incrustado en una aplicación de winforms. – FastAl

1

Si el elemento es una etiqueta de anclaje, debe ser capaz de hacer:

document.getElementsByName('label2')[0].focus(); 
+0

Tiene un error en su código: es document.getElementsByName. Fuente - http: // stackoverflow.com/questions/7816863/how-to-use-document-getelementbyname-and-getelementbytag –

1

no "#" cuando se utiliza window.location.hash

1

La solución

document.getElementById('MyID').scrollIntoView(true); 

funciona bien en casi todos los navegadores, mientras que he notado que en algunos navegadores o en algunos dispositivos móviles (como algunas versiones de Blackberry) la función "scrollIntoView" no se reconoce, por lo que consideraría esta solución (un poco más feo que el anterior):

window.location.href = window.location.protocol + "//" + window.location.host + 
         window.location.pathname + window.location.search + 
         "#MyAnchor"; 
3

Moviéndose a un ancla del lado del servidor, ejemplo es C#.

ClientScript.RegisterStartupScript(this.GetType(), "hash", "location.hash = '#form';", true); 
+0

funcionó como un encanto – Micro

+0

me ayudó también ... – VixterJ

Cuestiones relacionadas