agregar un hash con Javascript a url sin desplazar la página?

Question

agregar un hash a la url sin desplazar la página? con javascript

1. abro la página
2. me desplazo hacia abajo
3. yo haga clic en enlace que añade un hash (tal vez con un valor #test) (ejemplo: http://www.example.com/#test)
4. la página no debe desplazarse hacia atrás a la cima.

¿cómo se puede hacer esto?

nota: simplemente comprobando si es posible deshabilitar el movimiento incluso si hay alguna etiqueta con id = "test" hasta el momento el resultado es falso; funciona bien (para ayudar a personas sin javascript), y también para evitar la presencia de los identificadores en el html, pero no es un problema con cosas como números, como 1, 2, 3 (no están permitidos como id de todos modos)

todas las respuestas son geniales, nada nuevo o innovador, y no hay soluciones sobre cómo romper la funcionalidad predeterminada, pero lo hará. :) gracias por tomarse el tiempo para responder.

Answer 1

Cualquier hash que no esté presente en la página debería darle este comportamiento. Por ejemplo, this link points to a non-existant hash en esta página. (Link probado con Chrome 2.0 e IE 6 (los únicos navegadores que tengo disponible en este momento).)

Así que si su URL está causando que vaya al principio de la página, asegúrese de no tener nada encendido la página cuyo id o nombre es esa dirección.

Answer 2

Cada navegador interpretará el valor hash como "ir a esa ID DOM". Usted podría intentar dos cosas que se me ocurren:

1. hacer que la acción que se suma el hash para volver falsa, desactivando así la necesidad de que el navegador que mirar hacia arriba

2. Añadir una etiqueta DOM con el ID del hash que está agregando justo donde está el clic, para detener el movimiento del navegador. Pero probablemente esto no es lo que quieres, ya que estás agregando el hash para algo.

Answer 3

Cualquiera de los ejemplos a continuación deben hacer lo que quiera:

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<a href="pleaseEnableJS.html" 
    onclick="window.location.hash = '#test1';return false;">Test 1</a> 
<a href="#test2">Test 2</a> 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 

Si hay algún elemento con id="test1" o id="test2" o <a name="test1"></a> o <a name="test2"></a> en su página, se desplazará a ese elemento, de lo contrario debería funcionar como lo solicitó.

Si tiene un código que no funciona como se espera, por favor edit your question e incluya un pequeño ejemplo de HTML y JavaScript que no está funcionando como se esperaba.

Answer 4

La respuesta de Welbog funciona bien, pero deja el hash #nonexistantanchor en la barra de direcciones del navegador.

Para hacer esto con jQuery, puede agregar una clase al ancla y usar el método prevent default para deshabilitar tanto la navegación como el cambio a la url.

<a href='#' class="nodefault">Clickable</a> 

<script> 
$("a.nodefault").click(function(event) { 
    event.preventDefault(); 
}); 
</script> 

Por supuesto, el dilema estético ahora es si se prefiere una url elegante o una solución libre de javascript.