2009-11-09 24 views
7

Tôi đã có hai chức năng JS, một trong đó là thêm tùy chọn vào một hộp chọnLàm cách nào để ngăn đặt lại vị trí cuộn của trang sau khi thao tác 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); 
    }  
} 

và phần còn lại được thực hiện một document.getElementById (formId) .appendChild (newHiddenInput) trong một chức năng đơn giản tương tự.

Cả hai đều hoạt động, các thành phần được thêm vào như mong đợi. Tuy nhiên, khi gọi một trong hai trang này, trang sẽ đặt lại vị trí cuộn của nó lên đầu trang trong cả IE6 và FF. Không có postback, đây hoàn toàn là thao tác với khách hàng. Tôi đã đặt breakpoints trong Firebug, và nó xảy ra ngay lập tức sau khi element.appendChild hoặc select.add được thực thi. Tôi biết tôi có thể sử dụng JS để đặt thủ công vị trí cuộn, nhưng tôi không nghĩ rằng nó là cần thiết khi trang không được hiển thị lại.

Tôi không có chuyên gia với JS hoặc DOM, vì vậy tôi có thể thiếu một thứ gì đó, nhưng tôi đã xem here và chạy qua các ví dụ của họ với tùy chọn Thử tùy chọn này và tôi không thể tái tạo sự cố, cho biết codebase mà tôi đang làm là thủ phạm.

Bất kỳ ý tưởng nào tại sao vị trí cuộn đang được đặt lại? jQuery cũng có sẵn cho tôi, nếu nó cung cấp một lựa chọn tốt hơn.

Trả lời

9

Nếu các chức năng được gọi từ một liên kết mà bạn có thể có một neo nội bộ trong liên kết của bạn:

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

này đang gây ra hành vi nói. Hành vi mặc định là nếu một neo không tồn tại, vị trí cuộn trang sẽ nhảy lên đầu (scrollTop = 0).

Nếu điều này xảy ra trên mọi cuộc gọi hàm bất kể nguồn, thì điều này có thể bị gạch chéo khỏi danh sách.

4

Điều gì đang kích hoạt sự kiện?

Nếu đó là một neo thì trên sự kiện nhấp bạn cần phải "trả về false"; sau khi gọi đến mã jQuery/Ajax/jScript của bạn.

Nếu đó là nút bạn có thể cần thực hiện tương tự.

Tôi gặp vấn đề này ngày hôm qua và đây là giải pháp.

Vì vậy, <a href="#" onclick="DoStuff(); return false;">My link</a>

Các vấn đề liên quan