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:
27
index.js
27
index.js
@@ -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,6 +262,7 @@ Pjax.prototype = {
|
|||||||
|
|
||||||
state.options.analytics()
|
state.options.analytics()
|
||||||
|
|
||||||
|
if (state.options.history) {
|
||||||
// Scroll page to top on new page load
|
// Scroll page to top on new page load
|
||||||
if (state.options.scrollTo !== false) {
|
if (state.options.scrollTo !== false) {
|
||||||
if (state.options.scrollTo.length > 1) {
|
if (state.options.scrollTo.length > 1) {
|
||||||
@@ -259,6 +272,10 @@ Pjax.prototype = {
|
|||||||
window.scrollTo(0, state.options.scrollTo)
|
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,
|
||||||
|
|||||||
Reference in New Issue
Block a user