senchalabs / jQTouch

Create powerful mobile apps with just HTML, CSS, and Zepto.js (or jQuery).
http://www.jqtouch.com/
MIT License
2.78k stars 590 forks source link

Back button should restore previous page's scroll position #196

Open etaranov opened 13 years ago

etaranov commented 13 years ago

I have a list of items and preview page for each. When user tap back button he returned to top of list page. Is there a way to restore previous page Y-scroll position?

eoma commented 13 years ago

Bump

jonathanstark commented 13 years ago

I've been looking into this, and it is not as easy as it might sound. I could capture scroll position and jump to it after slideright animation completes, but this looks like crap. What I'd like to do is "prescroll" the incoming page to the original position, but I haven't found a great way to do that yet. If someone wants to fork and figure it out, I'd be more than happy to merge it in.

etaranov commented 13 years ago

I created one patch in jqtouch rev 148 that i'm using in project i'm working on. It worked but i don't use animation. Probably this helps someone else or this feature will be added to new release :)

Here is a diff:

--- 1131
+++ 1132
@@ -228,6 +228,10 @@
                 // Remove all pages in front of the target page
                 hist.splice(0, numberOfPages);
                 animatePages(curPage.page, hist[0].page, curPage.animation, curPage.reverse === false);
+                
+// Eugene: added call for scrollTo - restoring last position of page
+                var yPosition = curPage.position ? curPage.position : 0;
+                window.scrollTo( 0, yPosition);
             } else {
                 location.hash = '#' + curPage.id;
             }
@@ -260,8 +264,11 @@
                 }

             }
+// Eugene: get scrollTop value before animating
+            var scrollTop = document.body.scrollTop;
             if (animatePages(fromPage, toPage, animation, reverse)) {
-                addPageToHistory(toPage, animation, reverse);
+// Eugene: added argument with last y-position (scrollTop)
+                addPageToHistory(toPage, animation, reverse, scrollTop);
                 return publicObj;
             } else {
                 //console.error('Could not animate pages.');
@@ -333,7 +340,8 @@
             }
             return false;
         }
-        function addPageToHistory(page, animation, reverse) {
+// Eugene: added argument scrollTop - position of last page
+        function addPageToHistory(page, animation, reverse, scrollTop) {
             // Grab some info
             var pageId = page.attr('id');
             // Prepend info to page history
@@ -341,7 +349,9 @@
                 page: page,
                 animation: animation,
                 reverse: reverse || false,
-                id: pageId
\ No newline at end of file
+                id: pageId,
+// Eugene: added value scrollTop position of last page
+                position: scrollTop
\ No newline at end of file
             });
         }
         function animatePages(fromPage, toPage, animation, backwards) {
cemsisman commented 13 years ago

Is there any progress on this issue? thanks.