2009-11-09 7 views
7

Ho due funzioni JS, uno che è l'aggiunta di opzioni per una casella di selezioneCome reimpostare la posizione di scorrimento della pagina dopo la manipolazione del DOM?

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

e un altro che sta facendo un document.getElementById (formid) .appendChild (newHiddenInput) in una funzione altrettanto semplice.

Entrambi funzionano, gli elementi vengono aggiunti come previsto. Tuttavia, richiamando uno di essi, la pagina riporta la sua posizione di scorrimento all'inizio della pagina sia in IE6 che in FF. Non c'è alcun postback, questa è puramente la manipolazione clientide. Ho impostato i breakpoint in Firebug e si verifica immediatamente dopo l'elemento element.appendChild o select.add viene eseguito. So che posso usare JS per impostare manualmente una posizione di scorrimento, ma non pensavo fosse necessario quando la pagina non è stata rieseguita.

Non sono esperto di JS o DOM, quindi potrei stare perdendo qualcosa, ma ho cercato here e ho analizzato i loro esempi con le opzioni Try it Here e non riesco a replicare il problema, indicando il codice base con cui sto lavorando è il colpevole.

Eventuali motivi per cui la posizione di scorrimento viene ripristinata? jQuery è disponibile anche a me, se fornisce un'alternativa migliore.

risposta

9

Se le funzioni sono chiamati da un collegamento si potrebbe avere un ancoraggio interno nel tuo link:

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

Questo sta causando detto comportamento. Il comportamento predefinito è che se un ancoraggio non esiste, la posizione di scorrimento della pagina salta all'inizio (scrollTop = 0).

Se ciò accade a ogni chiamata di funzione indipendentemente dalla sorgente, questo può essere barrato dall'elenco.

4

Che cosa sta attivando l'evento?

Se si tratta di un ancoraggio, nell'evento clic è necessario "restituire falso"; dopo la chiamata al tuo codice jQuery/Ajax/jScript.

Se si tratta di un pulsante potrebbe essere necessario fare lo stesso.

Ho avuto questo problema ieri e questa era la risoluzione.

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

Problemi correlati