1

When I am using firefox and scroll in a infinite-scroll div and reload the page I am scrolled back to the last session scroll position.

This is a live test page.

The bug can reproduced with the following steps.

1st. on firefox load the page.
2nd. click on "click me" text.
3rd. scroll the list down to the midle of the page.
4th. reload the page "WITHOUT" clearing the cache.
5th. click on "click me" text again.
6th. observe the position.

I know how to solve this by versioning the site with PHP but I would like an other way.

Giwrgos Gkogkas
  • 459
  • 7
  • 19
  • 1
    We are not asking you to reproduce your entire code, but at least create a [**minimal, concrete and verifiable example**](http://stackoverflow.com/help/mcve) to demonstrate what you want to achieve. – Terry Apr 01 '15 at 11:26
  • @Terry I created a simple example of my code. To recreate the problem: - Click "#trigger". - Scroll a couple of times. - Refresh page. - Click "#trigger" again. When the list gets populated the page will scroll down where you scrolled last time. Firefox only. – Giwrgos Gkogkas Apr 01 '15 at 12:01

3 Answers3

2

When the document is ready, $(this) refers to window.document, when we do $(this).scrollTop(0); it bring the scroll bar to top position of the window object. Try somthing like this:

$(document).ready(function(){
    $(this).scrollTop(0);
});
Felipe Oriani
  • 35,246
  • 17
  • 121
  • 176
D G ANNOJIRAO
  • 60
  • 4
0

I don't think you have access to it.

You need to give an ID to each element that you want to deeplink to so you have a way of referencing it. Eg:

$('#target').append('<li id="result'+i+'">Item'+i+'</li>');

The adding on of results to the end as you scroll is known as infinite scrolling.

As you scroll you need to either record the #fragment in the url or update the url using history.pushState(). There is some discussion of the two ways of storing this information in this thread:

When the user comes back to the page you should be doing this in the page load:

  1. Check if you have a result to scroll to
  2. Load in the number of results so that the target exists
  3. Use some kind of smooth scroll to move the user down to that result
Community
  • 1
  • 1
rtpHarry
  • 12,334
  • 4
  • 39
  • 59
  • I am not quite sure that I understood what you suggest. Could you make it more clear? Thank you for your time. – Giwrgos Gkogkas Apr 01 '15 at 12:27
  • 1
    You need [something like this](http://scrollsample.appspot.com/items). Notice as you scroll through it adds a page=5 etc to the url at the top. If you left the page and came back to it then you could use this page=5 to figure out how far down you need to scroll the user. – rtpHarry Apr 01 '15 at 13:09
  • My problem is that I don't want to scroll the user at all. I want to append the elements the position to stay put. The same way that Chrome and IE do it. Firefox is the only browser that has this function. – Giwrgos Gkogkas Apr 01 '15 at 13:12
0

The only possible way I found to solve the caching problem firefox was is "Versioning". Versioning forces the browser to get the page from the server and not the cache memory.

This is easily done by providing a get parameter to the url you want to fresh get each time. An easy code to do this is the following.

<?php
   <a href="your/url.com?v=".time()> a random text </a>
?>

Also you will have to do version control on the target page. This is also to be done.

<?php 
   if(isset($_GET['v']) && $_GET['v']!=time()){
      header("location: your/url.com?v=".time());
   }
?>

The previous code check if the "GET" parameter "v" is set and not equal to Now Timestamp.
If that is true then the Web Server relocates the user to the same page but with updated parameter, thus requesting the page from the server and not the cache.

This is the only way to force clear cache programmatically through php.

Giwrgos Gkogkas
  • 459
  • 7
  • 19