Save scroll position with history

Save scroll position when navigating away from a page, and restore
it when navigating back to that page.

Fixes #30.
This commit is contained in:
Behind The Math
2018-01-22 11:27:13 -05:00
parent b5c2120d08
commit 37d303ed66

View File

@@ -13,7 +13,6 @@ var defaultSwitches = require("./lib/switches")
var Pjax = function(options) { var Pjax = function(options) {
this.firstrun = true
this.state = { this.state = {
numPendingSwitches: 0, numPendingSwitches: 0,
href: null, href: null,
@@ -35,6 +34,7 @@ var Pjax = function(options) {
opt.title = st.state.title opt.title = st.state.title
opt.history = false opt.history = false
opt.requestOptions = {}; opt.requestOptions = {};
opt.scrollPos = st.state.scrollPos
if (st.state.uid < this.lastUid) { if (st.state.uid < this.lastUid) {
opt.backward = true opt.backward = true
} }
@@ -160,6 +160,17 @@ Pjax.prototype = {
return return
} }
// push scroll position to history
var currentState = window.history.state || {}
window.history.replaceState({
url: currentState.url || window.location.href,
title: currentState.title || document.title,
uid: currentState.uid || newUid(),
scrollPos: [document.documentElement.scrollLeft || document.body.scrollLeft,
document.documentElement.scrollTop || document.body.scrollTop]
},
document.title, window.location)
// Clear out any focused controls before inserting new page contents. // Clear out any focused controls before inserting new page contents.
document.activeElement.blur() document.activeElement.blur()
@@ -218,13 +229,13 @@ Pjax.prototype = {
var state = this.state var state = this.state
if (state.options.history) { if (state.options.history) {
if (this.firstrun) { if (!window.history.state) {
this.lastUid = this.maxUid = newUid() this.lastUid = this.maxUid = newUid()
this.firstrun = false
window.history.replaceState({ window.history.replaceState({
url: window.location.href, url: window.location.href,
title: document.title, title: document.title,
uid: this.maxUid uid: this.maxUid,
scrollPos: 0
}, },
document.title) document.title)
} }
@@ -235,7 +246,8 @@ Pjax.prototype = {
window.history.pushState({ window.history.pushState({
url: state.href, url: state.href,
title: state.options.title, title: state.options.title,
uid: this.maxUid uid: this.maxUid,
scrollPos: 0
}, },
state.options.title, state.options.title,
state.href) state.href)
@@ -250,15 +262,20 @@ Pjax.prototype = {
state.options.analytics() state.options.analytics()
// Scroll page to top on new page load if (state.options.history) {
if (state.options.scrollTo !== false) { // Scroll page to top on new page load
if (state.options.scrollTo.length > 1) { if (state.options.scrollTo !== false) {
window.scrollTo(state.options.scrollTo[0], state.options.scrollTo[1]) if (state.options.scrollTo.length > 1) {
} window.scrollTo(state.options.scrollTo[0], state.options.scrollTo[1])
else { }
window.scrollTo(0, state.options.scrollTo) else {
window.scrollTo(0, state.options.scrollTo)
}
} }
} }
else {
window.scrollTo(state.options.scrollPos[0], state.options.scrollPos[1])
}
this.state = { this.state = {
numPendingSwitches: 0, numPendingSwitches: 0,