How to remember page scroll position

Question

I send some data to my database and then reload the same page as the user, but I was wondering if there is a way to remember the scroll position that only the user was at?

Answer 1

I realized that I missed the important part of sending, so I decided to configure the code to store the cookie in the click event instead of the original way of saving it when scrolling.

---

The jquery method is used here:

jsfiddle _{(Just add /show at the end of the url if you want to view it outside the frames)}

It is very important that you need the 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() ); }); }); 

---

---

Here's the code from the original answer:

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() ); }); }); 

---

Answer to

@Cody reminded me of something important.

I just did this to check and scroll to the vertical position.

Answer 2

(1) Solution 1:

First, get the scroll position by JavaScript when you click the submit button.

Secondly, include this scroll position value in the data presented on the PHP page.

Thirdly, the PHP code should write this value to the generated HTML as a JS variable:

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

Fourth, use JS to jump to the position given by the JS variable 'Scroll_Pos'

(2) Decision 2:

Save the position in a cookie, then use JS to go to the saved position when the page reloads.

Answer 3

Save the position in a hidden field.

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

than with jQuery, keep scrollTop and 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()+"'>"); }); 

Then at the next reboot, redirect or print them using PHP

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

Answer 4

Well, if you use _targets in your code, you can save this.

Or you can make an ajax request to get window.height.

  document.body.offsetHeight; 

Then drop them, give the javascript variable and move the page for them.

Answer 5

To remember, scroll through all pages. Use this code.

 $(document).ready(function (e) { let UrlsObj = localStorage.getItem('rememberScroll'); let ParseUrlsObj = JSON.parse(UrlsObj); let windowUrl = window.location.href; if (ParseUrlsObj == null) { return false; } ParseUrlsObj.forEach(function (el) { if (el.url === windowUrl) { let getPos = el.scroll; $(window).scrollTop(getPos); } }); }); function RememberScrollPage(scrollPos) { let UrlsObj = localStorage.getItem('rememberScroll'); let urlsArr = JSON.parse(UrlsObj); if (urlsArr == null) { urlsArr = []; } if (urlsArr.length == 0) { urlsArr = []; } let urlWindow = window.location.href; let urlScroll = scrollPos; let urlObj = {url: urlWindow, scroll: scrollPos}; let matchedUrl = false; let matchedIndex = 0; if (urlsArr.length != 0) { urlsArr.forEach(function (el, index) { if (el.url === urlWindow) { matchedUrl = true; matchedIndex = index; } }); if (matchedUrl === true) { urlsArr[matchedIndex].scroll = urlScroll; } else { urlsArr.push(urlObj); } } else { urlsArr.push(urlObj); } localStorage.setItem('rememberScroll', JSON.stringify(urlsArr)); } $(window).scroll(function (event) { let topScroll = $(window).scrollTop(); console.log('Scrolling', topScroll); RememberScrollPage(topScroll); }); 

Answer 6

I had serious problems with javascript cookies, most cookies could not load fast enough before I needed to scroll through the onload event. so I decided to use a modern html5 browser. it saves the last scroll position in the client web browser itself, and then, when the page reloads, it reads the settings from the browser back to the last scroll position.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { if (localStorage.getItem("my_app_name_here-quote-scroll") != null) { $(window).scrollTop(localStorage.getItem("my_app_name_here-quote-scroll")); } $(window).on("scroll", function() { localStorage.setItem("my_app_name_here-quote-scroll", $(window).scrollTop()); }); }); </script>