Comment empêcher la réinitialisation de la position de défilement de la page après la manipulation du DOM?

Question

J'ai deux fonctions de JS, qui est l'ajout d'options à une boîte de sélection

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); 
    }  
} 

et un autre qui fait un document.getElementById (formId) .appendChild (newHiddenInput) dans une fonction aussi simples.

Les deux fonctionnent, les éléments sont ajoutés comme prévu. Cependant, en appelant l'un d'eux, la page réinitialise sa position de défilement vers le haut de la page dans IE6 et FF. Il n'y a pas de postback, c'est une manipulation purement client. J'ai défini des points d'arrêt dans Firebug, et cela se produit immédiatement après l'exécution de element.appendChild ou select.add. Je sais que je peux utiliser JS pour définir manuellement une position de défilement, mais je ne pensais pas que c'était nécessaire lorsque la page n'était pas rendue à nouveau. Je ne suis pas un expert avec JS ou le DOM, donc je peux très bien manquer quelque chose, mais j'ai regardé here et a couru à travers leurs exemples avec les options Try It Here et je ne peux pas reproduire le problème, Indiquer la base de code avec laquelle je travaille est le coupable.

Des idées pour lesquelles la position de défilement est en cours de réinitialisation? jQuery est également disponible pour moi, s'il offre une meilleure alternative.

Answer 1

Si les fonctions sont appelées à partir d'un lien que vous pourriez avoir un point d'ancrage interne dans votre lien:

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

Ceci est à l'origine dudit comportement. Le comportement par défaut est que si une ancre n'existe pas, la position de défilement de la page saute vers le haut (scrollTop = 0).

Si cela se produit à chaque appel de fonction quelle que soit la source, cela peut être rayé de la liste.

Answer 2

Qu'est-ce qui active l'événement?

Si c'est une ancre alors sur l'événement click vous devez "return false"; après l'appel à votre code jQuery/Ajax/jScript.

Si c'est un bouton, vous devrez peut-être faire la même chose.

J'ai eu ce problème hier et c'était la résolution.

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