How to fade in page content after refresh?

Question

I've built a fairly simple site that utilizes pjax to load content. My problem is: once a user scrolls to say... the middle of any given page and performs a refresh, the page reloads starting at the top, then jumps down to whatever distance from the top the user was at when they refreshed.

My question is: how can I hide ALL document content after a refresh, then fade everything in after a short timeout (half a second, for instance) to avoid the jarring page jump?

Any help/advice is much appreciated!

Answer 1

You can set the content to display: none; in your CSS initially and have an onready handler call .fadeIn(): https://jsfiddle.net/19e14sev/

$(function() {
   var secondsToWait = 2;
   setTimeout(function() {
      $('#content-selector').fadeIn();
   }, secondsToWait * 1000);
});