# Scroll position on back

**URL:** <https://forum.ionicframework.com/t/scroll-position-on-back/291>\
**Category:** ionic-v1\
**Created:** [December 19, 2013, 12:52pm UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291 "2013-12-19T12:52:11Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![gregorypratt](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gregorypratt/32/64031_2.png) [@gregorypratt](https://forum.ionicframework.com/u/gregorypratt)\
**Post date:** [December 19, 2013, 12:52pm UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291/1 "2013-12-19T12:52:11Z")

</div>

I have a long list of items that are links to the next page. I scroll down halfway, and tap an item.

When I press back (I am using the nav-router) the position of the list is set to the top. But I’d like to press back and be taken back to the previous page and previous scroll position.

I think this is because pressing back essentially re-loads the previous page.

Is there an **Ionic** solution to this problem? Or will I have to roll my own?

---

<div class="post-metadata">

**Author:** ![max](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/max/32/137761_2.png) [@max](https://forum.ionicframework.com/u/max)\
**Post date:** [December 19, 2013, 9:52pm UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291/2 "2013-12-19T21:52:03Z")

</div>

This is something we will hopefully be able to do with the new nav system that @adam is working on. Stay tuned!

---

<div class="post-metadata">

**Author:** ![adam](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/adam/32/63947_2.png) [@adam](https://forum.ionicframework.com/u/adam)\
**Post date:** [December 19, 2013, 10:03pm UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291/3 "2013-12-19T22:03:57Z")

</div>

Yup, at a coffee shop writing tests for it right now. I’ll give you a heads up when I get the branch in github.

---

<div class="post-metadata">

**Author:** ![gregorypratt](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gregorypratt/32/64031_2.png) [@gregorypratt](https://forum.ionicframework.com/u/gregorypratt)\
**Post date:** [December 19, 2013, 10:11pm UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291/4 "2013-12-19T22:11:18Z")

</div>

Cool, this is a big bug bear for PhoneGap-like apps. One of things that give away that its not native…

---

<div class="post-metadata">

**Author:** ![alexb](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexb](https://forum.ionicframework.com/u/alexb)\
**Post date:** [January 16, 2014, 12:21am UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291/5 "2014-01-16T00:21:47Z")

</div>

Did this get in the Ionic code that is now up? Do we have to do anything or will it just work this way (as this is something I really want too)  
Thanks!

---

<div class="post-metadata">

**Author:** ![daniel](https://avatars.discourse-cdn.com/v4/letter/d/3ec8ea/32.png) [@daniel](https://forum.ionicframework.com/u/daniel)\
**Post date:** [January 16, 2014, 8:17am UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291/6 "2014-01-16T08:17:19Z")

</div>

I’d really like to see this too!

I guess I opened a duplicate for this: [Persistent list position / scroll view offset when navigating between pages](http://forum.ionicframework.com/t/persistent-list-position-scroll-view-offset-when-navigating-between-pages/522)

---

<div class="post-metadata">

**Author:** ![Ben](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ben/32/115916_2.png) [@Ben](https://forum.ionicframework.com/u/Ben)\
**Post date:** [January 17, 2014, 5:36pm UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291/7 "2014-01-17T17:36:55Z")

</div>

Thanks for bringing this back up @alexb @daniel. I’m not entirely sure if it’s added yet, @adam will have more information on this soon… 😄

---

<div class="post-metadata">

**Author:** ![adam](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/adam/32/63947_2.png) [@adam](https://forum.ionicframework.com/u/adam)\
**Post date:** [January 20, 2014, 3:48am UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291/8 "2014-01-20T03:48:11Z")

</div>

This one is quite a challenge because the content and scope gest destroyed between each view. I’ll create an issue so we can keep working on it:

> <https://github.com/ionic-team/ionic/issues/439>
>
> I have a long list of items that are links to the next page. I scroll down halfway, and tap an...

---

<div class="post-metadata">

**Author:** ![gregorypratt](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gregorypratt/32/64031_2.png) [@gregorypratt](https://forum.ionicframework.com/u/gregorypratt)\
**Post date:** [January 22, 2014, 10:08pm UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291/9 "2014-01-22T22:08:45Z")

</div>

I don’t know if it will help but I threw this together and it feels close (but no cigar).

Basically this directive will capture the state name and position of scroll when you leave the page. It will then store the information in an object in an array in a service.

Then when the view is loaded again (on back for instance) the object in the array in the service is retrieved based on state name and the scroll position is applied.

```
.directive('keepScroll', function ($filter, $timeout, $state, $ionicScrollDelegate, $scrollPosition) {
  return function ($scope, $element, $attrs) {
    var scrollableElement = $element[0].querySelector('.scroll');
    var view = $filter('filter')($scrollPosition.views, { name: $state.current.name })[0];
    // Save scroll position on view change
    $scope.$on("$stateChangeStart", function () {

      // +++ how do I get this value? ++++
      var position = 0; //

      // Save existing view
      if (view) view.position = position;
      else {
        // Add view to collection
        $scrollPosition.views.push({
          name: $state.current.name,
          position: position
        });
      }
    });

    // Apply scroll position to view
    $timeout(function () {
      
      // +++ this doesn't exist but it would be nice if it did! +++
      if (view) $ionicScrollDelegate.scrollTo(0, view.position, false);

    }, 0);
  }
})

```

It’s obviously not complete, but I just thought it might be useful if anyone were to tackle this problem.

---

<div class="post-metadata">

**Author:** ![Ben](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ben/32/115916_2.png) [@Ben](https://forum.ionicframework.com/u/Ben)\
**Post date:** [January 22, 2014, 10:39pm UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291/10 "2014-01-22T22:39:03Z")

</div>

Sweet @gregorypratt! We will definitely check this out soon. I’m sure @adam will like diving into it.

---

<div class="post-metadata">

**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\
**Post date:** [February 3, 2014, 9:40am UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291/11 "2014-02-03T09:40:52Z")

</div>

Following this with interest… @gregorypratt, does this solution work for you? What are the drawbacks?  
Also @max and @adam, will this be supported soon?

---

<div class="post-metadata">

**Author:** ![adam](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/adam/32/63947_2.png) [@adam](https://forum.ionicframework.com/u/adam)\
**Post date:** [February 3, 2014, 3:19pm UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291/12 "2014-02-03T15:19:32Z")

</div>

Yes this is something we’ll be putting into Ionic. // @andytjoslin

---

<div class="post-metadata">

**Author:** ![andy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/andy/32/64157_2.png) [@andy](https://forum.ionicframework.com/u/andy)\
**Post date:** [February 4, 2014, 1:49pm UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291/13 "2014-02-04T13:49:33Z")

</div>

Added this morning ([this commit](https://github.com/driftyco/ionic/commit/2d1b71c8e2356d73d69722a23875cac45f5e1449)).

Ionic now by default remembers the scroll of any page you go back to, using the view history.

---

<div class="post-metadata">

**Author:** ![gregorypratt](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gregorypratt/32/64031_2.png) [@gregorypratt](https://forum.ionicframework.com/u/gregorypratt)\
**Post date:** [February 4, 2014, 2:01pm UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291/14 "2014-02-04T14:01:50Z")

</div>

If this passes the scrutiny of the community it should get its own entry in the Announcement section of the forum!! 🙂

---

<div class="post-metadata">

**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\
**Post date:** [February 4, 2014, 3:54pm UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291/15 "2014-02-04T15:54:44Z")

</div>

Yes!!! Can’t wait to test this. Amazing work!!

---

<div class="post-metadata">

**Author:** ![alexb](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexb](https://forum.ionicframework.com/u/alexb)\
**Post date:** [February 5, 2014, 12:16am UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291/16 "2014-02-05T00:16:24Z")

</div>

Just tested it and on first look, its great!

One little thought (that I am sure I can code around, only tested this 5 mins ago)

1. LIST \> Detail
2. Scroll down detail page a little (as if you are reading something).
3. Back button to List - NOW at the vertical position you were before you went to detail - Great!
4. Go into another detail … now you are at vertical position you left 2 in… even though its a NEW detail page so I would prefer to be reading from the top of the new detail page…

So I guess on detail we need to not be scrolling down - or we need a simple scroll to top whenever you go to detail (which I am sure is possible, just not dug out how to do that yet)

Probably more of a documentation thing - make it clear in the list documents how to scroll to top - as I think this could be a cause of support questions otherwise

---

<div class="post-metadata">

**Author:** ![andy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/andy/32/64157_2.png) [@andy](https://forum.ionicframework.com/u/andy)\
**Post date:** [February 5, 2014, 12:28am UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291/17 "2014-02-05T00:28:43Z")

</div>

Good point @alexb! It should only store if going ‘back’ in the history. We’ll reopen the issue and fix it soon.

> <https://github.com/ionic-team/ionic/issues/439>
>
> I have a long list of items that are links to the next page. I scroll down halfway, and tap an...

---

<div class="post-metadata">

**Author:** ![alexb](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexb](https://forum.ionicframework.com/u/alexb)\
**Post date:** [February 5, 2014, 12:40am UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291/18 "2014-02-05T00:40:00Z")

</div>

Yeah thats a better approach!

---

<div class="post-metadata">

**Author:** ![andy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/andy/32/64157_2.png) [@andy](https://forum.ionicframework.com/u/andy)\
**Post date:** [February 5, 2014, 3:47pm UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291/19 "2014-02-05T15:47:57Z")

</div>

@alexb fixed. Could you test it out again? Get the latest code from [http://code.ionicframework.com](http://code.ionicframework.com) nightly build’s zip file.

---

<div class="post-metadata">

**Author:** ![alexb](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexb](https://forum.ionicframework.com/u/alexb)\
**Post date:** [February 6, 2014, 5:59pm UTC](https://forum.ionicframework.com/t/scroll-position-on-back/291/20 "2014-02-06T17:59:32Z")

</div>

Looks good! Thank you @andytjoslin

[Next page](https://forum.ionicframework.com/t/scroll-position-on-back/291.md?page=2)