2010-01-07 7 views
26

Duplicar posible:
How do I stop a web page from scrolling to the top when a link is clicked that triggers javascript?enlace con la página href = "#" se desplaza a la parte superior cuando se utiliza con jQuery slideToggle

estoy usando slideToggle de jQuery para mostrar divs/ocultar. el elemento que controla el deslizamiento es un enlace de texto (texto dentro de < \ a>) que tiene href = "#" por lo que se verá como un enlace (subrayado, cambio de cursor).

el problema es que cuando se hace clic en el enlace, además del efecto deslizante, , la página se desplaza hacia arriba.

intenté reemplazar href = "#" con href = "" pero eso deshabilita el efecto mostrar/ocultar div. supongo que podría agregar a la etiqueta Name = "somename" y luego establecer href a href = "# somename" pero preferiría no utilizar trucos como ese.

¿por qué href = "#" desplaza la página hacia la parte superior?

cualquier idea sería muy apreciada

Respuesta

70

varias opciones:

  1. Pon return false; en la parte inferior de la controlador de clic y el href suele ser seguidas.
  2. Cambie el href a javascript:void(0);
  3. llamada preventDefault sobre el evento en el controlador:

    function(e) { 
        e.preventDefault(); 
        // your event handling code 
    } 
    
+3

gracias a todos por sus respuestas. utilicé return false y funciona perfectamente stackoverflow es increíble! – samoyed

+0

Excelente solución thenduks, me salvó un montón de problemas =) –

+4

'return false;' NO es la forma correcta de manejar esto. Muy a menudo, los desarrolladores lanzan lentamente 'return false;' al final de sus manejadores de eventos sin entender las consecuencias de esta acción. No hay ninguna razón para evitar la propagación del evento. Todo lo que necesita hacer aquí es evitar la acción predeterminada del agente de usuario. Entonces, 'preventDefault()' es la función correcta para usar aquí. –

5

Es necesario añadir return false; a su controlador de clic.
Esto evitará que el navegador ejecute la acción predeterminada para el clic.

+0

que hizo el trabajo. –

1

Otros se han dado soluciones. Pero para responder específicamente a su pregunta, # se refiere a la página actual. Y dado que la interpretación de las etiquetas es llevar a la vista el superior de la etiqueta, al hacer clic en una etiqueta # se lo desplaza a la parte superior de la página actual.

1

return false o event.preventDefault() son lo que necesita en su controlador de eventos click para evitar que se produzca la acción predeterminada. Un elemento <a> con href de # hará que la ventana del navegador salte a la parte superior de la página como la acción predeterminada

Cuestiones relacionadas