Rails: Turbolinks back to top of page

Question

I am using turbolinks for rails; whenever I click on a link the page scrolls down to the previous page's scroll position. I want all my pages to load such that it doesn't scroll down (stays at the top of the page). I don't need turbolinks to remember my previous scroll position. So how do I force the pages to load with scroll position at the top (0,0)?

I've tried

$ ->
    window.scrollTo 0,0

But I'm probably not binding this right.

Answer 1

You might be using an older version of turbolinks. This issue was fixed.

Try updating your Gemfile to use a newer version. I had the same issue using '1.1.1' but it was resolved after switching to '2.2.3'.

Answer 2

The reason is Turbolink replaced the DOM element without refreshing page so your scrolling stays at the same position.

To change, you need to watch the event emitted by Turbolinks indicated the page loading is done, and then start your scrolling action.

Try this:

$ ->
  $(document).on 'page:load', ->
    window.scrollTo 0, 0

Answer 3

I was facing the same problem in Rails 6 and solved it by adding

document.addEventListener("turbolinks:load", function() {
    window.scrollTo(0,0)
});

under <script> tag of application.html.erb.

This basically addEventListener to the DOM, whenever turbolinks load, it automatically scrolls to the top of the page.

Answer 4

am facing same issues with rails 6. to solve it, you have to tell the browser not to handle scrolling when restoring via the history or when reloading. below is a comprehensive script to handle position

;(function () {
  // Tell the browser not to handle scrolling when restoring via the history or when reloading
  if ('scrollRestoration' in history) history.scrollRestoration = 'manual'

  var SCROLL_POSITION = 'scroll-position'
  var PAGE_INVALIDATED = 'page-invalidated'

  // Patch the reload method to flag that the following page load originated from the page being invalidated
  Turbolinks.BrowserAdapter.prototype.reload = function () {
    sessionStorage.setItem(PAGE_INVALIDATED, 'true')
    location.reload()
  }

  // Persist the scroll position when leaving a page
  addEventListener('beforeunload', function () {
    sessionStorage.setItem(
      SCROLL_POSITION,
      JSON.stringify({
        scrollX: scrollX,
        scrollY: scrollY,
        location: location.href
      })
    )
  })

  // When a page is fully loaded:
  // 1. Get the persisted scroll position
  // 2. If the locations match and the load did not originate from a page invalidation, scroll to the persisted position
  // 3. Remove the persisted information
  addEventListener('DOMContentLoaded', function (event) {
    var scrollPosition = JSON.parse(sessionStorage.getItem(SCROLL_POSITION))

    if (shouldScroll(scrollPosition)) {
      scrollTo(scrollPosition.scrollX, scrollPosition.scrollY)
    }

    sessionStorage.removeItem(SCROLL_POSITION)
    sessionStorage.removeItem(PAGE_INVALIDATED)
  })

  function shouldScroll (scrollPosition) {
    return (
      scrollPosition &&
      scrollPosition.location === location.href &&
      !JSON.parse(sessionStorage.getItem(PAGE_INVALIDATED))
    )
  }
})()