How to stay at current position of page after SPF.js navigates to new URL

Question

By the way, sorry for my English. Please edit for me :)

I'm using https://youtube.github.io/spfjs/ for fast navigation like one page application. But when SPF.js call spf.navigate(url) I get redirected to another page.

For sample when I scroll down my website a bit, click <a class="spf-link" href="http://example.com/nextpage"> next page is loading normally without refresh, but scroll Y position is not saving and I'm getting to the top. That really annoys users when they just want to stay at the current scrolling.

Is there any configurable state or position whenspf.navigate() is called by SPF.js? or I have to do some trick to do it.

Answer 1

Answer is here

You can use session storage to store the position then get back to the position when the page is reloaded, like this:

$(window).scroll(function() {
  sessionStorage.scrollTop = $(this).scrollTop();
});

$(document).ready(function() {
  if (sessionStorage.scrollTop != "undefined") {
    $(window).scrollTop(sessionStorage.scrollTop);
  }
});

Answer 2

For SPF.js user with vanilla javascript, this should do a trick :)

let xCoord = 0;
let yCoord = 0;
document.addEventListener('spfrequest', () => {
    xCoord = window.pageXOffset;
    yCoord = window.pageYOffset;
});
document.addEventListener('spfdone', () => {
    window.scrollTo(xCoord, yCoord);
});