Add possibility to keep current scroll position in the Turbolinks.visit API

[tzvetkoff]

On certain occasions some might need to keep current scroll position.
In my case I call Turbolinks.visit(location.href) to reload the content of the current page -- this is an improvised replacement for location.reload().
Problem is, that if you want to reload the current page content for, say, new elements created by AJAX form submission, the page will scroll back to top, yet you want to keep the scroll position.

Partial replacements is a way to do this, but requires specific Rails code on the backend to just render that partial and then you're getting even more tied to the front-end.

So, I've added an extra option to keep the scroll position.

When invoking Turbolinks manually:

Turbolinks.visit(path, { keepScrollPosition: true });

Or by marking the element with the data-turbolinks-keep-scroll attribute:

<a href="/path" data-turbolinks-keep-scroll>Change the page and keep current scroll position.</a>

Edited: 2015-05-04

[tzvetkoff]

I've rebased against current master, updated the code and changed the "logic" a bit to respect the name (keep_scroll)

[reed]

Would I be correct in saying that the only scenario where you'd use this is if you're reloading the current page? I mean, it wouldn't really make sense to keep the scroll position after visiting a different page, right? So maybe it would be cleaner and more intuitive to add a Turbolinks.reload() function instead of modifying the visit function. What do you think?

[morr]

@reed no it is not the only scenario. Keeping scroll position is also makes sense for applications with some turbolinks filters on left or right page side.
Please look at #66.

[ajb]

👍 -- can we get an updated status/reason for exclusion on this? This feature is useful to me in another way -- for appending items to a list via AJAX. The server responds with redirect_via_turbolinks_to, but the scroll position stays the same.

[drewhamlett]

I believe this will be more important with the new Turbolinks 3 partial changes. Right now when the partial changes the page scrolls to the top. This is not what you really want happening.

Right now I'm doing this. Which was posted in one of the other issues about scrolling.

$(document).on "page:change", ->
  window.prevPageYOffset = window.pageYOffset
  window.prevPageXOffset = window.pageXOffset

$(document).on "page:load", ->
  window.scrollTo window.prevPageXOffset, window.prevPageYOffset

[Thibaut]

Right now when the partial changes the page scrolls to the top.

@drewhamlett This shouldn't happen with Turbolinks.replace / render :action, change: :key. Can you post the code that you're using?

[drewhamlett]

I must be missing something, because I'm using the redirect to in this case. I have a section on a page that gets updated, but the page requires a bunch of other data to re render that page, not specific the section that gets updated. If I just use render I have to duplicate a lot of code to fetch all the other pieces of the page.

Unless I'm doing something wrong?

[Thibaut]

@drewhamlett Oops, I forgot that Turbolinks.visit / redirect_to can also do partial replacements. Expect a PR / fix soon.

[tzvetkoff]

Rewrote the patch to conform to the latest Turbolinks code and updated the PR description.

[Thibaut]

@tzvetkoff I'm working on a similar PR with tests for some of the edge cases and a fix for the problem @drewhamlett described. Will keep you updated.

[vizo]

👍 Thanks guys, very useful. Browsing will look like on SPA :)

[Thibaut]

Turbolinks.visit(url, scroll: false) has been merged into master (#528). I will PR data-turbolinks-scroll=false and update the docs this week-end.

Thanks all for pushing this forward.

[ajb]

Thanks @Thibaut and everyone!