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=falseturbolinksScrollSetup(document)
Usage
DOM elements
Set data-turbolinks-scroll=false
DOM elements you want to persist scroll position for on their click
or submit
event
AJAX calls
import { turbolinksScrollSetTop } from "turbolinks-scroll" // mark the current scroll top before AJAX submit// so that it will persist on next Turbolinks visitturbolinksScrollSetTop() $.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 triggereddelegate("[data-turbolinks-scroll]", "myEvent", function (e) { turbolinksScrollSetTop()}, false)