Làm thế nào để nhớ vị trí cuộn của trang

Question

Tôi đang gửi một số dữ liệu vào cơ sở dữ liệu của mình, sau đó tải lại cùng một trang khi người dùng đang bật, tôi đã tự hỏi liệu có cách nào để nhớ vị trí cuộn mà người dùng đã bật không?

Answer 1

Tôi nhận ra rằng tôi đã bỏ lỡ một phần quan trọng về việc gửi, vì vậy, tôi đã quyết định tinh chỉnh mã để lưu trữ cookie trên sự kiện nhấp thay vì cách lưu trữ ban đầu trong khi cuộn.

---

Đây là một cách jquery để làm việc đó:

jsfiddle _{(Chỉ cần thêm /show vào cuối url nếu bạn muốn xem nó ở ngoài khung)}

Rất quan trọng, bạn sẽ cần số jquery cookie plugin.

jQuery:

// When document is ready... 
$(document).ready(function() { 

    // If cookie is set, scroll to the position saved in the cookie. 
    if ($.cookie("scroll") !== null) { 
     $(document).scrollTop($.cookie("scroll")); 
    } 

    // When a button is clicked... 
    $('#submit').on("click", function() { 

     // Set a cookie that holds the scroll position. 
     $.cookie("scroll", $(document).scrollTop()); 

    }); 

}); 

---

---

đây vẫn là mã từ câu trả lời ban đầu:

jsfiddle

jQuery:

// When document is ready... 
$(document).ready(function() { 

    // If cookie is set, scroll to the position saved in the cookie. 
    if ($.cookie("scroll") !== null) { 
     $(document).scrollTop($.cookie("scroll")); 
    } 

    // When scrolling happens.... 
    $(window).on("scroll", function() { 

     // Set a cookie that holds the scroll position. 
     $.cookie("scroll", $(document).scrollTop()); 

    }); 

}); 

---

@ Câu trả lời của Cody nhắc tôi về điều gì đó quan trọng.

Tôi chỉ làm cho nó để kiểm tra và cuộn đến vị trí theo chiều dọc.

Answer 2

Vâng, nếu bạn sử dụng _targets trong mã của mình, bạn có thể lưu điều đó.

Hoặc bạn có thể thực hiện yêu cầu ajax để nhận cửa sổ.hình ảnh.

document.body.offsetHeight; 

Sau đó thả lại, chuyển javascript và di chuyển trang cho chúng.

Answer 3

(1) Giải pháp 1:

Đầu tiên, lấy vị trí cuộn bởi JavaScript khi nhấp vào nút gửi.

Thứ hai, bao gồm giá trị vị trí cuộn này trong dữ liệu được gửi tới trang PHP.

Thứ ba, mã PHP nên viết lại giá trị này vào HTML được tạo ra như một biến JS:

<script> 
var Scroll_Pos = <?php echo $Scroll_Pos; ?>; 
</script> 

Thứ tư, sử dụng JS để di chuyển đến vị trí xác định bởi các biến JS 'Scroll_Pos'

(2) Giải pháp 2:

Lưu vị trí vào cookie, sau đó sử dụng JS để cuộn đến vị trí đã lưu khi trang được tải lại.

Answer 4

Lưu vị trí trong trường bị ẩn.

<form id="myform"> 
    <!--Bunch of inputs--> 
</form> 

hơn với jQuery lưu trữ các scrollTop và scrollLeft

$("form#myform").submit(function(){ 
    $(this).append("<input type='hidden' name='scrollTop' value='"+$(document).scrollTop()+"'>"); 

    $(this).append("<input type='hidden' name='scrollLeft' value='"+$(document).scrollLeft()+"'>"); 
}); 

Thân tải lại tiếp theo làm một chuyển hướng hoặc in chúng với PHP

$(document).ready(function(){ 
    <?php 
     if(isset($_REQUEST["scrollTop"]) && isset($_REQUEST["scrollLeft"])) 
     echo "window.scrollTo(".$_REQUEST["scrollTop"].",".$_REQUEST["scrollLeft"].")"; 
    ?> 
});