HTML vínculo de anclaje sin desplazamiento o salto

Question

Tengo varios enlaces que todos tienen un identificador único que se "pseudo-anclas." Quiero que afectan a la url valor de hash y haga clic en la magia es todo manejarse a través de un código de mootools.Sin embargo, cuando hago clic en los enlaces que desplazarse a sí mismo (o a la parte superior en un caso).No quiero para desplazarse a cualquier lugar, pero también necesito mi código javascript a ejecutar y a tener el valor hash de la url de actualización.

Simulado código de ejemplo:

<a href="#button1" id="button1">button 1</a>
<a href="#button2" id="button2">button 2</a>
<a href="#" id="reset">Home</a>

Así que si usted se haga clic en el "botón 1" enlace, la url se puede http://example.com/foo.php#button1

¿Alguien tiene alguna idea para esto?El simple hecho de tener algo de javascript devuelve void mata el desplazamiento, pero también mata a mi javascript (aunque yo probablemente podría evitar que con un onclick), pero lo que es más importante, evita que el valor hash de la url para el cambio.

Answer 1

Probablemente me estoy perdiendo algo, pero ¿por qué no darles ID diferentes?

<a href="#button1" id="button-1">button 1</a>
<a href="#button2" id="button-2">button 2</a>
<a href="#" id="reset">Home</a>

O cualquier convención que prefieras.

Answer 2

El punto entero de un vínculo de anclaje es para desplazarse de una página a un punto en particular.Así que si usted no desea que eso ocurra, es necesario adjuntar una onclick controlador y devolver false.Incluso añadir simplemente como un atributo debería funcionar:

<a href="#button1" id="button1" onclick="return false">button 1</a>

Un lado de la vigencia de la anterior, es que la propia dirección URL no cambia, puesto que devolver false va a cancelar el evento.Así que ya desea que la URL en realidad el cambio, puede establecer el window.location.hash variable el valor que desee (que es la única propiedad de la dirección URL que se puede cambiar sin el navegador forzar la recarga).Usted probablemente puede conectar un controlador de eventos y llame algo como window.location.hash = this.id aunque no estoy seguro de cómo mootools controla los eventos.

(También es necesario que todos los Identificadores de ser único)

Answer 3

Puede usar el siguiente código para evitar desplazarse:

<a href="javascript:void(0);">linktxt</a>

Answer 4

Encontré la solución. Aquí guardo una ubicación antigua de llamar a href y restaurarlo después de desplazarse

<script language="JavaScript" type="text/javascript">
<!--
function keepLocation(oldOffset) {
  if (window.pageYOffset!= null){
    st=oldOffset;
  }
  if (document.body.scrollWidth!= null){
    st=oldOffset;
  }
  setTimeout('window.scrollTo(0,st)',10);
}
//-->
</script>

y en el cuerpo de la página

<a href="#tab1" onclick="keepLocation(window.pageYOffset);" >Item</a> 

Gracias a punto de sitio

Answer 5

Además, preventDefault

    $(your-selector).click(function (event) {
        event.preventDefault();
        //rest of your code here
    }

Answer 6

Una forma más fácil probablemente sería agregarlo como GET. Es decir, http://example.com/foo.php?q=#button1 en lugar de http://example.com/foo.php#button1

Esto no tendrá ningún efecto sobre cómo se muestra la página (a menos que lo desee), y la mayoría de los lenguajes de secuencias de comandos ya tienen herramientas para leer los datos de manera fácil (y segura).

Answer 7

Bueno, aquí estamos 7 años después de que se publicó esta respuesta y encontré una forma diferente de hacerlo funcionar: ¡solo apunte el window.location.hash a un ancla inexistente! No funciona durante <a> s pero funciona perfectamente en <div> s.

<div onclick="window.location.hash = '#NonExistentAnchor';">button 1</div>

Funcionó bien en Chrome 56, Firefox 52 y Edge (IE?) 38. Otro buen punto es que esto no produce ningún error o advertencia de la consola.

Espero que ayude a alguien además de mí.