Collection-repeat scrolls to top when clicking back from item screen

I’m using collection-repeat, which is defined like that:

<ion-view hide-back-button="true">
<ion-content overflow-scroll = "true" >
<ion-refresher on-refresh="doRefresh()" spinner="none" pulling-icon="none"> </ion-refresher> <ion-list> <ion-item collection-repeat="item in items" force-refresh-images="true" item-render-buffer="10" href="#/items/{{}}"> <div>{{item.title}}</div> </ion-item> </ion-list> </ion-content> </ion-view>

When clicking on an item, the item’s detailed screen is displayed:

<ion-header-bar align-title="left" class="bar"> <a class="back-button" href="#/list_screen"></a> <h1>Item Details</h1> </ion-header-bar> <ion-view on-swipe-right="swipeRightAction()"> </ion-view>

The problem is that when hitting on the back “button” above, the collection-repeat list scrolls all the way to the top, instead of retaining its position. My list is long, and scrolling back to the previous item can be very frustrating.

Another interesting fact, is when swiping the Item Details screen to the right, the below is called, and the collection-repeat doesn’t scroll up, but retains its propper position:

$scope.swipeRightAction = function() { $location.path("list_screen"); };

I tried calling swipeRightAction() directly from the button:

<a class="back-button" ng-click="swipeRightAction()"></a>

But the list kept scrolling up.

I would appreciate if somebody would tell me what is the quickest way to fix this issue. Thanks!

set the no-tap-scroll property to false for your headerbar

1 Like

Thank you !

I’ve set: no-tap-scroll="true" and it solved the problem.