Commit 71b34f50de91ed336896caecfc6b4fba906ee22d
1 parent
ab7a4bc7
Navigation preserve scroll height
Well, native browsing does it, but since it takes time to update a page (even without any animation), if it tries to scroll high to a big page from a small page, the small page will block further scrolling, resulting in a mid-scroll on the big page.
Showing
1 changed file
with
25 additions
and
8 deletions
Show diff stats
js/crep.js
| @@ -12,12 +12,20 @@ function pageName(href) { | @@ -12,12 +12,20 @@ function pageName(href) { | ||
| 12 | return false | 12 | return false |
| 13 | } | 13 | } |
| 14 | 14 | ||
| 15 | +function updateScrollData() { | ||
| 16 | + history.state.scrollTop = $(document.body).scrollTop() | ||
| 17 | + history.replaceState(history.state) | ||
| 18 | +} | ||
| 19 | + | ||
| 15 | function pageSpecific(location) { | 20 | function pageSpecific(location) { |
| 16 | if (pageName(location) == 'contact') { | 21 | if (pageName(location) == 'contact') { |
| 17 | initializeMap() | 22 | initializeMap() |
| 18 | } | 23 | } |
| 24 | + $(document).scroll(updateScrollData) | ||
| 19 | } | 25 | } |
| 20 | 26 | ||
| 27 | + | ||
| 28 | + | ||
| 21 | function actLink(ev) { | 29 | function actLink(ev) { |
| 22 | var location = ev.currentTarget.href | 30 | var location = ev.currentTarget.href |
| 23 | var page = pageName(location) | 31 | var page = pageName(location) |
| @@ -43,7 +51,6 @@ function loadDoc(location, callback) { | @@ -43,7 +51,6 @@ function loadDoc(location, callback) { | ||
| 43 | } | 51 | } |
| 44 | var eventsLeft = 2 | 52 | var eventsLeft = 2 |
| 45 | var html = '' | 53 | var html = '' |
| 46 | - | ||
| 47 | var mainContainer = $("#mainContainer") | 54 | var mainContainer = $("#mainContainer") |
| 48 | var oldHeight = mainContainer.height() | 55 | var oldHeight = mainContainer.height() |
| 49 | 56 | ||
| @@ -69,6 +76,10 @@ function loadDoc(location, callback) { | @@ -69,6 +76,10 @@ function loadDoc(location, callback) { | ||
| 69 | } | 76 | } |
| 70 | } | 77 | } |
| 71 | // Out | 78 | // Out |
| 79 | + $(document).off('scroll', updateScrollData) | ||
| 80 | + $(document.body).animate({ | ||
| 81 | + scrollTop: $('.navbar-lower').height() | ||
| 82 | + }, 'fast') | ||
| 72 | $.get(location + '?c', function (data) { | 83 | $.get(location + '?c', function (data) { |
| 73 | html = data | 84 | html = data |
| 74 | events() | 85 | events() |
| @@ -77,19 +88,25 @@ function loadDoc(location, callback) { | @@ -77,19 +88,25 @@ function loadDoc(location, callback) { | ||
| 77 | mainContainer.animate({ | 88 | mainContainer.animate({ |
| 78 | opacity: 0 | 89 | opacity: 0 |
| 79 | }, 'fast', events) | 90 | }, 'fast', events) |
| 80 | - $(document.body).animate({ | ||
| 81 | - scrollTop: $('.navbar-lower').height() | ||
| 82 | - }) | ||
| 83 | - | ||
| 84 | } | 91 | } |
| 85 | 92 | ||
| 86 | function historyChange(ev) { | 93 | function historyChange(ev) { |
| 87 | - loadDoc(ev.state.loc) | 94 | + loadDoc(ev.state.loc, function () { |
| 95 | + if (ev.state.scrollTop > $('.navbar-lower').height()) { | ||
| 96 | + $(document.body).animate({ | ||
| 97 | + scrollTop: ev.state.scrollTop | ||
| 98 | + }, 'fast') | ||
| 99 | + } | ||
| 100 | + }) | ||
| 88 | } | 101 | } |
| 89 | 102 | ||
| 90 | $(document).ready(function () { | 103 | $(document).ready(function () { |
| 91 | - dynamiseLinks(document) | ||
| 92 | - pageSpecific(window.location.href) | 104 | + dynamiseLinks(document.body) |
| 105 | + var current = window.location.href | ||
| 106 | + pageSpecific(current) | ||
| 107 | + history.replaceState({ | ||
| 108 | + loc: current | ||
| 109 | + }, document.title, current) | ||
| 93 | window.onpopstate = historyChange | 110 | window.onpopstate = historyChange |
| 94 | }) | 111 | }) |
| 95 | 112 |