LeClubInfo / crep

Commit 71b34f50de91ed336896caecfc6b4fba906ee22d

Authored by Geoffrey PREUD'HOMME
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
Inline Side-by-side
js/crep.js
  Show/Hide comments   View file @71b34f5
... ... @@ -12,12 +12,20 @@ function pageName(href) {
12 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 20 function pageSpecific(location) {
16 21 if (pageName(location) == 'contact') {
17 22 initializeMap()
18 23 }
  24 + $(document).scroll(updateScrollData)
19 25 }
20 26  
  27 +
  28 +
21 29 function actLink(ev) {
22 30 var location = ev.currentTarget.href
23 31 var page = pageName(location)
... ... @@ -43,7 +51,6 @@ function loadDoc(location, callback) {
43 51 }
44 52 var eventsLeft = 2
45 53 var html = ''
46   -
47 54 var mainContainer = $("#mainContainer")
48 55 var oldHeight = mainContainer.height()
49 56  
... ... @@ -69,6 +76,10 @@ function loadDoc(location, callback) {
69 76 }
70 77 }
71 78 // Out
  79 + $(document).off('scroll', updateScrollData)
  80 + $(document.body).animate({
  81 + scrollTop: $('.navbar-lower').height()
  82 + }, 'fast')
72 83 $.get(location + '?c', function (data) {
73 84 html = data
74 85 events()
... ... @@ -77,19 +88,25 @@ function loadDoc(location, callback) {
77 88 mainContainer.animate({
78 89 opacity: 0
79 90 }, 'fast', events)
80   - $(document.body).animate({
81   - scrollTop: $('.navbar-lower').height()
82   - })
83   -
84 91 }
85 92  
86 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 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 110 window.onpopstate = historyChange
94 111 })
95 112  
... ...