2009-11-09 3 views
7

У меня есть два JS функции, одна из которых является добавление опции в окне выбораКак предотвратить сброс позиции прокрутки страницы после 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); 
    }  
} 

, а другой, что делает document.getElementById (FormID) .appendChild (newHiddenInput) в такой же простой функции.

Они оба работают, элементы добавляются, как ожидалось. Однако при вызове любого из них страница сбрасывает свою позицию прокрутки в верхнюю часть страницы как в IE6, так и в FF. Нет обратной передачи, это чисто клиентская манипуляция. Я установил точки останова в Firebug, и это происходит сразу же после выполнения элемента element.appendChild или select.add. Я знаю, что я могу использовать JS для ручной установки положения прокрутки, но я не думал, что это необходимо, когда страница не перерисовывается.

Я не эксперт с JS или DOM, поэтому я, возможно, очень ничего не заметил, но я посмотрел here и просмотрел их примеры с помощью параметров «Попробовать здесь», и я не могу воспроизвести проблему, указывая на кодовую базу, с которой я работаю, является виновником.

Любые идеи, почему положение прокрутки сбрасывается? jQuery также доступен мне, если он предоставляет лучшую альтернативу.

ответ

9

Если функция вызывается по ссылке вы можете иметь внутренний якорь в вашей ссылке:

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

Это вызывает указанное поведение. Поведение по умолчанию состоит в том, что если привязка не существует, позиция прокрутки страницы переместится в начало (scrollTop = 0).

Если это происходит при каждом вызове функции независимо от источника, то это может быть вычеркнуто из списка.

4

Что активирует мероприятие?

Если это якорь, то при событии click вам нужно «вернуть false»; после вызова вашего кода jQuery/Ajax/jScript.

Если это кнопка, вам может потребоваться сделать то же самое.

У меня был этот вопрос вчера, и это была резолюция.

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

Смежные вопросы