Làm cách nào để lấy và đặt vị trí cuộn trang web hiện tại?

121

Tôi có một biểu mẫu dài cần được làm mới dựa trên hành động / đầu vào của người dùng. Khi điều này xảy ra, trang sẽ đặt lại ở đầu trang, điều này gây khó chịu cho người dùng, vì họ phải cuộn xuống điểm họ đã ở đó.

Nếu tôi có thể nắm bắt được vị trí cuộn hiện tại (trong một đầu vào ẩn) trước khi trang tải lại, thì tôi có thể đặt lại sau khi tải lại.

javascript html

— XYZ
nguồn

Không phải một biểu mẫu được điều khiển bởi AJAX không phải là cách tốt hơn để ngăn chặn những ảnh hưởng đó (và tất nhiên là cung cấp một dự phòng trong trường hợp không có XHR)? Tải lại trang sẽ có trang nhảy lên đầu và quay lại lần nữa, một điều kỳ quặc có thể gây khó chịu.

— Marcel Korpel

118

Bạn đang tìm kiếm document.documentElement.scrollToptài sản.

— SLaks
nguồn

cảm ơn, tôi đã tìm thấy cái này: article.sitepoint.com/article/javascript-from-scratch/6 và đã sửa đổi getScrollingPosition()để lưu trữ các giá trị trong các biến ẩn. Sau đó, trong html của trang được làm mới mà tôi sử dụng <body onLoad="window.scrollTo(x,y), trong đó x và y là những giá trị từ các giá trị ẩn!

— xyz

46

Tôi thấy, trên Chrome trên Ubuntu ít nhất, nó document.documentElement.scrollTopluôn trả về 0. document.body.scrollTopTuy nhiên, dường như hoạt động. Mặt khác, một Firefox trên Ubuntu thì ngược lại - bạn nhận được 0 với bodyvà số lượng chính xác với documentElement. Bất kỳ ý tưởng những gì cho?

— tobek

12

Câu trả lời này không chính xác vì thuộc scrollToptính không hoạt động trên tất cả các trình duyệt. Kiểm tra window.pageXOffsetvà window.pageYOffsetcho kết quả tốt hơn.

— gyo

135

Câu trả lời hiện được chấp nhận là không chính xác - document.documentElement.scrollTopluôn trả về 0 trên Chrome. Điều này là do WebKit sử dụng bodyđể theo dõi quá trình cuộn, trong khi Firefox và IE sử dụnghtml .

Để có được vị trí hiện tại, bạn muốn:

document.documentElement.scrollTop || document.body.scrollTop

Bạn có thể đặt vị trí hiện tại thành 1000px xuống trang như sau:

document.documentElement.scrollTop = document.body.scrollTop = 1000;

Hoặc, sử dụng jQuery (tạo hoạt ảnh cho nó khi bạn đang ở đó!):

$("html, body").animate({ scrollTop: "1000px" });

— tobek
nguồn

5

câu trả lời của gyo, gợi ý window.pageYOffsetlà rõ ràng hơn nếu bạn đang sử dụng window.scrollBy()hoặc window.scrollTo()các phương pháp.

— igorsantos07

32

Có một số mâu thuẫn trong cách trình duyệt hiển thị tọa độ cuộn cửa sổ hiện tại. Google Chrome trên Mac và iOS dường như luôn quay lại 0khi sử dụng document.documentElement.scrollTophoặc của jQuery $(window).scrollTop().

Tuy nhiên, nó hoạt động nhất quán với:

// horizontal scrolling amount
window.pageXOffset

// vertical scrolling amount
window.pageYOffset

— gyo
nguồn

Tôi cũng đã nhận thấy nó, nó có phải là một lỗi trên Mac và iOS không?

— Alexander Kim

@AlexanderKim Tôi nghĩ nó có thể liên quan đến cách diễn giải các quy tắc CSS nhất định (như tràn) và nó đã được báo cáo là hoạt động nếu kiểm tra scrollTop trên cả phần thân và phần tử html. Tuy nhiên, để tránh thử nghiệm và gỡ lỗi, tôi luôn dựa vào trangXOffset / pageYOffset an toàn và nhất quán.

— gyo

rất cảm ơn vì câu trả lời chính xác

— Michael Paccione

5

Tôi đã sử dụng giải pháp lưu trữ cục bộ HTML5 ... Tất cả các liên kết của tôi đều gọi một hàm đặt điều này trước khi thay đổi window.location:

localStorage.topper = document.body.scrollTop;

và mỗi trang có điều này trong onLoad của cơ thể:

  if(localStorage.topper > 0){ 
    window.scrollTo(0,localStorage.topper);
  }

— AX Labs
nguồn

3

Sẽ đẹp hơn nếu sử dụng setItem () và getItem () của localStorage và thay vào đó sao lưu vị trí cuộn tại mỗi lần nhấp vào liên kết, lưu trữ một lần khi rời khỏi trang: window.addEventListener ("beforeunload", function () {localStorage. setItem ("scrolly", document.documentElement.scrollTop || document.body.scrollTop);});

— StanE