Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

reset scroll position on page replacement #66

Closed
moomerman opened this Issue Oct 2, 2012 · 11 comments

Comments

Projects
None yet
5 participants

It's really annoying then you visit a link with shorter content and being greeted with a blank page, having to scroll up to see the content. I just experimented with resetting the scroll position to 0,0 on successful fetch and it feels much more natural:

xhr.onload  = ->
    changePage extractTitleAndContent(xhr.responseText)...
    reflectRedirectedUrl xhr
    resetScrollPosition()
    triggerEvent 'page:load'

resetScrollPosition = ->
  window.scrollTo 0, 0

@davydotcom davydotcom added a commit to davydotcom/turbolinks that referenced this issue Oct 3, 2012

@davydotcom davydotcom added reset scroll position per @moomerman issue #66 e25c7b7
Contributor

davydotcom commented Oct 3, 2012

I shoved this into #67 pull request.

Contributor

dhh commented Oct 3, 2012

Fixed in #67

@dhh dhh closed this Oct 3, 2012

Would it be possible to disable this behavior for particular links? We're building a page with sidebar links acting as "filters" and it's jarring when the page scrolls to the top every time they click a filter. Maybe something like:

link_to product_filters_path(@filters), data: { no_scroll: true }

I realize we could rebuild it using ajax, but that was the primary reason we wanted to use Turbolinks.

I can submit a pull request if this is desirable.

Contributor

davydotcom commented Mar 13, 2013

It's replacing the hole page, so the way you could fix your problem is using the page:change and page:load events. Store position and restore

Sent from my iPhone

On Mar 13, 2013, at 12:47 PM, Jamon Holmgren notifications@github.com wrote:

Would it be possible to disable this behavior for particular links? We're building a page with sidebar links acting as "filters" and it's jarring when the page scrolls to the top every time they click a filter. Maybe something like:

link_to product_filters_path(@filters), data: { no_scroll: true }
I realize we could rebuild it using ajax, but that was the primary reason we wanted to use Turbolinks.

I can submit a pull request if this is desirable.


Reply to this email directly or view it on GitHub.

Screenshot of our application. Seems like this is a fairly normal usage.

Screen Shot 2013-03-13 at 9 45 08 AM

Thanks, @davydotcom . Would this result in a "flicker" to the top and back down?

Contributor

davydotcom commented Mar 13, 2013

i dont think so, those events fire so quickly that i believe it will set position before the webkit renderer kicks in . Give it a shot if it continues. we'll figure something else out .

Sounds good. Thanks!

It worked. For future reference, this is what I did:

https://gist.github.com/5154738

  $(document).on "page:change", ->
    window.prevPageYOffset = window.pageYOffset
    window.prevPageXOffset = window.pageXOffset
  $(document).on "page:load", ->
    if $(".fix-scroll").length > 0
      $('.fix-scroll').hide().show() # force re-render -- having an issue with that on Chrome/OSX
      window.scrollTo window.prevPageXOffset, window.prevPageYOffset

I wrote a simple patch for turbolinks to enable or disable this on a link-by-link basis with a "data-keep-scroll" attribute. I've opened a pull request. Meanwhile, you can use my fork by altering your Gemfile:

gem 'turbolinks', github: 'linesarefuzzy/turbolinks'

I also made this work with a form, like @jamonholmgren was asking about (uses jQuery):

class TurboForm
  constructor: (@form) ->

  submit: (keepScroll = false) ->
    @form.action ||= location.pathname
    url = @form.action + (if '?' in @form.action then '&' else '?') + $(@form).serialize()
    Turbolinks.visit(url, keepScroll)

Then, the click/change handler for each form element:

(event) ->
  turboForm = new TurboForm(event.target.form)
  turboForm.submit($(event.target).data('keep-scroll'))

Now you can put a "data-keep-scroll" attribute on any form element to designate it in the same way as with links.

Ours actually wasn't a form (just links), but that's cool that you made it work with a form.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment