jQuery - di chuyển đến một vị trí yếu tố cụ thể

Question

tôi có một hệ thống pagination như thế này:

[content] 
1 2 3 Next > 

khi bạn click vào 1/2/3/tiếp theo [nội dung] yếu tố được thay thế ajax máng.

vấn đề là trọng tâm màn hình di chuyển lên nếu chiều cao mới của [nội dung] lớn hơn chiều cao trước đó.

Tôi có thể buộc màn hình ở lại tập trung ở nơi liên kết pagination không?

Answer 1

Bạn cần phải tìm vị trí của phần tử và cuộn đến vị trí đó mỗi khi chiều cao thay đổi. Một cái gì đó như:

var p = $(".links").position(); 
$(window).scrollTop(p.top); 

Answer 2

Để làm cho trang hiển thị ở trong cùng một vị trí, bạn sẽ cần phải tìm ra liên kết ở đâu trước khi tải nội dung mới.

var before = $(".links").offset().top; 

Sau khi nội dung mới được tải, hãy nhận chiều cao mới của liên kết.

var after = $(".links").offset().top; 

Sau đó, thực hiện phép tính để biết số tiền được di chuyển.

var difference = after - before 

Và cập nhật vị trí cuộn của cửa sổ của bạn cho phù

$(window).scrollTop($(window).scrollTop() + difference) 

Answer 3

Bạn có thể sửa lỗi này mà không jQuery hoặc javascript ... Chỉ cần tạo một anchor được đặt tên nơi bạn muốn top of the page là sau khi người dùng nhấp vào liên kết điều hướng, đặt tên của neo trong định danh phân đoạn của các liên kết điều hướng và không hủy sự kiện để trang điều hướng đến neo.

<a name="contentTop"></a> 

[content] 

<a href="#contentTop" onclick="nextPage(); return true;">Next</a>