đến cùng vị trí khi quay lại với cuộn vô hạn

Question

Tôi muốn thực hiện chức năng trong đó khi nhấp vào nút quay lại, tôi quay lại vị trí cũ. Một ví dụ điển hình có thể là http://www.jabong.com/men/clothing/mens-t-shirts/. Ở đây, nếu bạn cuộn xuống và nhấn vào một sản phẩm và nhấp lại từ trang sản phẩm, bạn sẽ đến được vị trí tương tự của trang nơi sản phẩm đó.

Ví dụ được hiển thị ở đây không nối thêm bất kỳ thứ gì trong url để ghi nhớ vị trí. Ngoài ra, nó không sử dụng pushstate hoặc history.js (không tải thông qua ajax).

Mọi thông tin chi tiết về cách tôi có thể thực hiện việc này?

CHỈNH SỬA: Im sử dụng phân trang cuộn vô hạn (như sở thích) và các trang tiếp tục tải khi cuộn xuống. Khi tôi quay trở lại, truy vấn chạy lại và tải lại trang. Nếu tôi ở trên trang thứ 4 trước đây, sau khi quay lại, các trang không tải cho đến khi trang 4 và do đó, có một ngắt, do đó tôi không thể đạt được vị trí đó.

Vì vậy, câu hỏi của tôi là làm thế nào để tôi làm điều này với cuộn vô hạn?

Answer 1

Nếu bạn có thể sử dụng JQuery trong ứng dụng của mình. Bạn có thể thử WayPoint Plugin của nó rất đơn giản để sử dụng và từ câu hỏi của bạn, tôi nghĩ rằng đó là những gì bạn đang tìm kiếm.

đây là một ví dụ Infinite Scrolling và làm thế nào nó hoạt động:

http://imakewebthings.com/jquery-waypoints/shortcuts/infinite-scroll/

Ngoài ra hãy xem các hướng dẫn cho di chuyển vô hạn sử dụng plug-in khác nhau, bạn có thể sử dụng phương thức nào phù hợp với nhu cầu của bạn tốt.

http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/

EDIT:

Nếu bạn đang tìm kiếm để khôi phục lại vị trí nơi người dùng rời đi với cuộn vô hạn bằng cách sử dụng nút quay lại, đây là một chút phức tạp hơn và đòi hỏi phải có một số hoạt động thêm về phần của bạn và cách dữ liệu của bạn được tạo ra. Xin hãy nhìn vào một câu hỏi tương tự ở đây:

Is it possible to write an "Infinite Scroll" javascript that can handle the back button?

Answer 2

Tôi có cùng một vấn đề và tình hình là khá tương tự: không có dấu hoặc các thông số thay đổi trên url.

Đây là giải pháp của tôi và nó hoạt động:

1) Bạn có thể sử dụng window.history.go(-1) hoặc window.history.back(), mà là giống như nút back trên trình duyệt, để điều hướng đến trang trước.

2) Khi bạn sử dụng chức năng này, vì một số lý do nó có thể không quay lại vị trí trên trang cuối cùng của bạn (ví dụ: bạn chọn ảnh ở cuối trang và chuyển hướng đến trang tiếp theo. Khi bạn nhấp vào ' nút 'quay lại', nó quay trở lại đầu trang trước đó). Trong trường hợp này, bạn cần đặt giá trị scrollY hiện tại var currentScrollYonSession = window.scrollY vào phiên hoặc địa điểm khác, tùy thuộc vào mã của bạn, khi ứng dụng chuyển hướng đến trang tiếp theo (thông thường là onClick() hoặc onChange() sự kiện). Khi bạn nhấp vào nút 'quay lại' và ứng dụng tải trang trước đó, trước hết hãy kiểm tra phiên có giá trị scrollY là null hay không. Nếu nó là null, chỉ cần tải trang như nó; nếu không, lấy giá trị scrollY, tải trang và thiết lập giá trị scrollY đến trang hiện tại: window.scroll(0, currentScrollYonSession).

Answer 3

tôi đã đưa ra một giải pháp cho ứng dụng của tôi để đạt được điều này:

$(document).on('click', 'a', function() { 
    var scrollpos = $(window).scrollTop(); 
    localStorage.setItem('scrollpos', scrollpos); 
}); 

này sử dụng để lưu trữ Cục bộ có bao nhiêu pixels chúng tôi đang xuống từ phía trên cùng của trang.

var scrollplan = function() { 
    var foo = true 
    if ((foo == true) && $('.box').length > 30) { 
     var bar = localStorage.getItem('scrollpos') 
     $("html, body").animate({ scrollTop: bar}, 500); 
    } 
    $('.photosbtn').on('click', function(){ 
     var foo = false 
    }); 
    }; 

Tải trang ban đầu có 30 ảnh với hộp lớp. Phân trang của tôi bắt đầu bằng cách nhấp vào btn bằng photosbtn của lớp.