turbolinks-scroll

Persist scroll position between Turbolinks AJAX calls. Based on code from "How To: Turbolinks 5 Scroll Position Persistence" by Sedad Kosovac

Setup

import { turbolinksScrollSetup } from "turbolinks-scroll"

// automatically persist scroll on click or submit
// for any DOM element with data-turbolinks-scroll=false
turbolinksScrollSetup(document)

Usage

DOM elements

Set data-turbolinks-scroll=false DOM elements you want to persist scroll position for on their click or submit event

<%= form_with model: @user, url: users_path, data: { 'turbolinks-scroll': false }  do |f| %>
<% end %>

<%= link_to 'Users', users_path, 'data-turbolinks-scroll': false  %>

AJAX calls

import { turbolinksScrollSetTop } from "turbolinks-scroll"

// mark the current scroll top before AJAX submit
// so that it will persist on next Turbolinks visit
turbolinksScrollSetTop()

$.ajax({
  type: 'PUT',
  url: this.updateUrl,
  data: {
    id: id,
    position: newPosition
  },
  success: function (resp) {
  },
  error: function () {
  }
})

Delegating to other events

import { turbolinksScrollSetTop } from "turbolinks-scroll"

// set the scroll position for persistence when `myEvent` is triggered
delegate("[data-turbolinks-scroll]", "myEvent", function (e) {
  turbolinksScrollSetTop()
}, false)