jquery cuộn đến vị trí div cụ thể trong trường hợp lỗi và lấy nét

Question

Tôi có một div ẩn với các thông báo lỗi cụ thể trong toàn bộ biểu mẫu của tôi. Trước khi gửi biểu mẫu, tôi chạy một quy trình xác thực để kiểm tra xem tất cả các trường bắt buộc có được điền vào một số văn bản hay không. Nếu không, một div với lớp 'redAlert' sẽ hiển thị ngay phía trên trường văn bản. Tôi cũng muốn cửa sổ hộp thoại di chuyển sang phải đến vị trí này khi thông báo lỗi được hiển thị. Tôi biết có khá nhiều plugin có sẵn để làm điều này nhưng tôi muốn làm điều đó bằng cách sử dụng Jquery đơn giản. Tôi đang cố gắng để A) Tìm div đầu tiên có thể nhìn thấy với các lớp redAlert, b) Tìm vị trí của nó bằng cách gọi .offset() trên div này và sau đó c) gọi .scroll() trên đối tượng cửa sổ nhưng tôi không nhận được điều này làm việc. Hãy cho tôi biết nếu tôi thiếu một cái gì đó hoàn toàn hoặc cú pháp của tôi là không hợp lệ (tôi thường thấy mình đấu tranh với lỗi cú pháp với Jquery). Dưới đây là mã của tôi. Ngoài ra - điều này chỉ tìm thấy div hiển thị (giả sử chỉ có một lỗi div tại một thời điểm), bạn có thể vui lòng cung cấp cho tôi bộ chọn để tìm div đầu tiên có thể nhìn thấy với một lớp cụ thể không.

var errorDiv = $('.redAlert:visible').attr("id"); 
var scrollPos = $("#"+errorDiv).offset(); 
//alert(scrollPosition); // This alert always says 'null', why ? 
$(window).scroll(scrollPos); 
//Also tried scrollTo(); 

Cảm ơn nhiều trước.

Answer 1

var errorDiv = $('.redAlert:visible').first(); 
var scrollPos = errorDiv.offset().top; 
$(window).scrollTop(scrollPos); 

Demo:http://jsfiddle.net/Cjuve/2/

Answer 2

Tôi không nghĩ rằng sẽ của nó hoạt động ra ngoài.

Nhìn vào đoạn code tôi bỏ lại phía sau

$('html, body').animate({ 
    scrollTop: ($('.error').first().offset().top) 
},500);