¿Cómo evitar el reinicio de la posición de desplazamiento de la página después de la manipulación del DOM?

Question

Tengo dos funciones JS, que es la adición de opciones para un selecto cuadro de

function addOption(selectId, text, value) { 
    var selectbox = document.getElementById(selectId); 
    var optNew = document.createElement('option'); 
    optNew.text = text; 
    optNew.value = value; 
    try { 
     selectbox.add(optNew, null); //page position resets after this 
    } 
    catch(ex) { 
     selectbox.add(optNew); 
    }  
} 

y otro que está haciendo un document.getElementById (formid) .appendChild (newHiddenInput) en una función también muy sencillos.

Ambos funcionan, los elementos se agregan como se esperaba. Sin embargo, al llamar a cualquiera de ellos, la página restablece su posición de desplazamiento a la parte superior de la página en IE6 y FF. No hay devolución de datos, esto es pura manipulación del lado del cliente. Establecí puntos de interrupción en Firebug, y ocurre inmediatamente después de que se ejecute el elemento.appendChild o select.add. Sé que puedo usar JS para establecer manualmente una posición de desplazamiento, pero no creí que fuera necesario cuando la página no se vuelve a procesar.

No soy un experto con JS o el DOM, así que puede que me esté extrañando algo, pero miré here y revisé sus ejemplos con las opciones de Pruébelo aquí y no puedo replicar el problema, indicando que la base de código con la que estoy trabajando es el culpable.

¿Alguna idea de por qué se está restableciendo la posición de desplazamiento? jQuery también está disponible para mí si proporciona una mejor alternativa.

Answer 1

Si las funciones están siendo llamados desde un enlace que puede tener un anclaje interno de su enlace:

http://www.website.com/page.html# 

Esto está causando dicho comportamiento. El comportamiento predeterminado es que, si no existe un delimitador, la posición de desplazamiento de la página salta a la parte superior (scrollTop = 0).

Si esto sucede en todas las llamadas de función independientemente de la fuente, esto se puede tachar de la lista.

Answer 2

¿Qué está activando el evento?

Si es un delimitador, entonces en el evento de clic debe "devolver falso"; después de la llamada a su código jQuery/Ajax/jScript.

Si se trata de un botón, es posible que deba hacer lo mismo.

Tuve este problema ayer y esta fue la resolución.

So <a href="#" onclick="DoStuff(); return false;">My link</a>