Turbolinks: Scroll position persistance, but I don麓t want it

Created on 17 Mar 2017  路  15Comments  路  Source: turbolinks/turbolinks

Each time a user clicks a regular internal link on my page, the next page is rendered with the same scroll position, I dont want that and a bad fix is to reset the scroll on the page before leaving it or setting it on the new page, but both options make a confusing effect. How could I make turbolinks forget the scroll position or load on 0 position?

Most helpful comment

It is the opposite problem! So if you've managed to find why this is happening for you then that might help me enable it too. So far this seems to work pretty well for me, so perhaps you could update it to get the effect you are looking for?

Turbolinks.scroll = {};

$(document).on('click', '[data-turbolinks-scroll=false]', function(e) {
  Turbolinks.scroll['top'] = $('body').scrollTop();
});

// Use turbolinks:render so the scroll is reset when viewing a cached page too
$(document).on('turbolinks:render', function() {
  if (Turbolinks.scroll['top']) {
    $('body').scrollTop(Turbolinks.scroll['top']);
  }
  Turbolinks.scroll = {};
});

Either way, like you said, I'd rather use some sort of option built into Turbolinks if possible.

All 15 comments

I have the same problem, when i click on link, the next page is at the same scroll position.

I had the same problem with our site https://www.9curry.com but, it was happening only on iOS safari. I've now cleared all the caches on my cdn and my Memcached as well and somehow that solved it at least on my device. it's not persisting position anymore. If you happen to find that it's still happening with my site, please let me know so that I clear my CDN caches again to try to resolve it. Or If someone finds actual solution to this issue, that'd be awesome :)

I麓m not sure if that makes any sense...
By the way, my site is not using CDN

I'm actually look for a way to optionally enable this functionality since right now the page is always reset to the top. Any progress on changing the functionality that might point me in the right direction?

That is just the opposite problem?

It is the opposite problem! So if you've managed to find why this is happening for you then that might help me enable it too. So far this seems to work pretty well for me, so perhaps you could update it to get the effect you are looking for?

Turbolinks.scroll = {};

$(document).on('click', '[data-turbolinks-scroll=false]', function(e) {
  Turbolinks.scroll['top'] = $('body').scrollTop();
});

// Use turbolinks:render so the scroll is reset when viewing a cached page too
$(document).on('turbolinks:render', function() {
  if (Turbolinks.scroll['top']) {
    $('body').scrollTop(Turbolinks.scroll['top']);
  }
  Turbolinks.scroll = {};
});

Either way, like you said, I'd rather use some sort of option built into Turbolinks if possible.

For my case, the scroll position is saved for the previous page that is ok but when i click on a link he save the current position and give it to the next page so the user don't start at the top of the page ... nobody has the same problem ? :disappointed:

This is related to: https://github.com/turbolinks/turbolinks/issues/181 and maybe a duplicate. Would love to have the option to opt-out of this behaviour as well. For web apps it might make sense but for a website with some longer pages it is not desirable at all.

Is there a solution that doesn't involve to deactivate turbolinks in certain links? Using turbolinks:load and using JS to scroll to top performs very glitchy.

Oops! I've moved the previous comment to https://github.com/turbolinks/turbolinks/issues/181#issuecomment-423448708 for continued discussion. Closing as duplicate of #181

Just adding on my view :
data-turbolinks = "false"
worked fine for me

Just adding on my view :
data-turbolinks = "false"
worked fine for me

If you make it false there is no mean to use turbolinks than.

This behaviour is still there in current versions of Turbolinks: by default, when loading a new page, the scroll position of the previous page is kept, which seems like an odd default. It is hard to think of many cases where this would be appropriate.

An obvious and simple workaround is to just set the scroll position explicitly to the page top on the Turbolinks load event:

$(document).on("turbolinks:load", function (e) {
  window.scrollTo(0, 0)
})

@robjlucas thanks, I was experiencing this same bug and your hack resolved it for the time being.

Was this page helpful?
0 / 5 - 0 ratings