down - scroll to section jquery

jquery haga clic en el elemento de anclaje fuerzas de desplazamiento hacia arriba?

Question

jQuery hipervínculos - href valor? Texto 1]

Me estoy encontrando con un problema usando jquery y un evento de clic adjunto a un elemento de anclaje. [1]: hipervínculos jQuery - valor href? "Esta" pregunta SO parece ser un duplicado, y la respuesta aceptada no parece resolver el problema. Lo siento si esto es tan mala etiqueta.

En mi función .ready () tengo:

jQuery("#id_of_anchor").click(function(event) { //start function when any update link is clicked
Function_that_does_ajax();
});

y mi ancla se parece a esto:

<a href="#" id="id_of_anchor"> link text </a> 

pero cuando se hace clic en el enlace, la función ajax se realiza como se desea, pero el navegador se desplaza a la parte superior de la página. no está bien.

He intentado añadir:

event.preventDefault(); 

Antes de llamar a mi función que hace el ajax, pero eso no ayuda. ¿Qué me estoy perdiendo?

Aclaración

He usado todas las combinaciones de

return false;
event.preventDefault();
event.stopPropagation();

Antes y después de mi llamada a mi función js ajax. Todavía se desplaza hasta la parte superior.

Answer 1

Como dijo Tilal arriba:

<a id="id_of_anchor" href="javascript:void(0)" />

mantiene la etiqueta de anclaje con el aspecto correcto, le permite asignar manejadores de clics con javascript y no se desplaza. Lo usamos extensivamente solo por esta razón.

Answer 2

Eso debería funcionar, ¿puedes aclarar qué quieres decir con "antes"? ¿Estás haciendo esto?

jQuery("#id_of_anchor").click(function(event) {
event.preventDefault();
Function_that_does_ajax();
});

Porque eso debería funcionar en el sentido de que si no funciona, USTED está haciendo algo mal y necesitaríamos ver más código. Sin embargo, en aras de la integridad, también puede intentar esto:

jQuery("#id_of_anchor").click(function() {
Function_that_does_ajax();
return false;
});

EDITAR

Aquí hay un ejemplo de este trabajo .

Los dos enlaces utilizan este código:

$(''#test'').click(function(event) {
event.preventDefault();
$(this).html(''and I didnt scroll to the top!'');
});
$(''#test2'').click(function(event) {
$(this).html(''and I didnt scroll to the top!'');
return false;
});

Y como pueden ver, están funcionando bien.

Answer 3

Esta pregunta es más un ejercicio de depuración ya que se afirma que está utilizando las funciones correctas del objeto Evento jQuery .

En un controlador de eventos jQuery, puede hacer una o dos cosas básicas:

1. Evite el comportamiento predeterminado del elemento (The A HREF = "#", en su caso):

jQuery("#id_of_anchor").click(function(evt) {
// ...
evt.preventDefault(); // assuming your handler has "evt" as the first parameter
return false;
}

2. Impida que el evento se propague a los controladores de eventos en los elementos HTML que lo rodean:

jQuery("#id_of_anchor").click(function(evt) {
// ...
evt.stopPropagation(); // assuming your handler has "evt" as the first parameter
}

Dado que no está obteniendo el comportamiento esperado, debe eliminar la llamada ajax temporalmente, reemplazarla con un código inocuo como establecer un valor de formulario o -shudder- alert ("OK") y probar si aún se desplaza hacia la parte superior .

Answer 4

He estado teniendo el mismo problema.

Creo que ocurre cuando se vincula el evento antes de agregar el elemento al DOM.

Answer 5

Me ayudó mucho con el siguiente código. ¡Gracias!

 $(document).ready(function() {
$(".dropdown dt a").click(function(event) {
event.preventDefault();
$(".dropdown dd ul").toggle(''slow'');
});
$(".dropdown dd ul li a").click(function(event) {
event.preventDefault();
$(".dropdown dd ul").hide();
});
});

Answer 6

acaba de perder el

href="#"

En la etiqueta html ... eso es lo que hace que la página web "salte".

<a id="id_of_anchor"> link text </a>

y recuerda agregar

cursor: pointer;

a css de tu a para que se vea como un enlace en mouseover.

Buena suerte.

Answer 7

puedes usar javascript: void (0); en propiedad href.

Answer 8

$("#id_of_anchor").click(function(event) {
// ...
return false;
}