Evitar que la página vaya a la parte superior con un div se muestra / oculta con jQuery

Sé que el título de esta publicación es algo confuso, pero no se me ocurrió una manera de explicarlo en una sección tan corta.

Básicamente, mi pregunta es la siguiente: creé un programa para rastrear eventos, puede haber muchos eventos en una sola página, así que decidí ocultar los detalles de cada elemento inicialmente, cuando el usuario hace clic en el botón "ver detalles", los detalles div no está oculto y el usuario puede verlos, si vuelve a hacer clic en él, están ocultos.

El problema es que si el usuario está muy abajo en la página y hace clic en el enlace, lo devuelve a la parte superior de la página (sin dejar de mostrar los detalles), el usuario tiene que desplazarse hasta el final de la página para leer la entrada. . ¿Alguien conoce alguna forma de mantener al usuario en el mismo lugar en el que estaba cuando hizo clic en el botón?

Gracias, avíseme si puedo proporcionar algo más.

preguntado el 08 de noviembre de 11 a las 15:11

Muéstranos un código. ¿Es el botón "ver detalles" un <a href> ¿cosita? -

6 Respuestas

utilizado <a href="javascript:void(0)"> en lugar de #

respondido 08 nov., 11:19

wow, eso fue sorprendentemente fácil jaja gracias, no sé por qué tuve tal problema con eso - Gordnfreeman

Es probable que esto esté relacionado con el hecho de que el botón Ver detalles es un ancla con un # como el href .

Puede detener esto agregando:

return false;

o usando una llamada preventDefault ().

jQuery:

$('.view_details').on('click', function(event) {

    // Your Code
    event.preventDefault();
    // or
    return false;

});

Esto evitará que el enlace lo envíe a la parte superior de la página.

respondido 08 nov., 11:19

Supongo que tienes una etiqueta de anclaje en la que pueden hacer clic.

y esa etiqueta de anclaje enlaza con "#"?

Si es así, intente agregar onclick = "return false;" a esa etiqueta

<a href='#' class='view_details' onclick='return false;'>View details</a>

respondido 08 nov., 11:19

$('.view_details').click(function(e) {
   e.preventDefault();
   //do your stuff
});

respondido 08 nov., 11:19

Sin ver su HTML, solo puedo adivinar ... pero si está usando algo como esto:

<a href="#" id="details12" onclick="show_details();">show details</a>

... cuando el usuario hace clic en ese enlace, se dirige a la parte superior de la página. Eso es por el href propiedad que tiene allí - '#' es un ancla vacía y disparará la página hasta la parte superior. Todo lo que necesita hacer es devolver falso de su evento:

<a href="#" id="details12" onclick="return show_details();">show details</a>

function show_details(e) {
  // show the details

  return false;
}

También puedes usar event.preventDefault como se describe aquí: https://developer.mozilla.org/en/DOM/event.preventDefault

respondido 08 nov., 11:19

¿Puede haber olvidado la devolución falsa?

$("a.detail").click(function(){

    // Loading the div contents... 

    return false; // Don't forget this
});

respondido 08 nov., 11:19

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.