How to implement back button in infinite scroll in AngularJs?

Question

I am creating an application with angularjs, I have implemented an infinite scroll technique because I have many items to show, so this is a better experience than pagination, but the bad thing that I have is if the user clicks on an element that goes to the position page, but when he wants to return, he will be on top, and he must continue to scroll. what I want to achieve, if he hits the button, he can return to his position where he was!

Listing Elements:

<div class="container" id="infinit-container" ng-controller="ArticlesController"> <div id="fixed" when-scrolled="LoadMore()"> <div ng-repeat="article in Articles"> <article-post article="article"></article-post> </div> </div> </div> 

here is the once-scrolled directive

 app.directive('whenScrolled', function () { return function (scope, element, attrs) { $('#fixed').height($(window).height()); var div = element[0]; element.bind('scroll', function () { if (div.scrollTop + div.offsetHeight >= div.scrollHeight) { scope.$apply(attrs.whenScrolled); } }) } }) 

this is the controller

 app.controller('ArticlesController', function ($scope, UserService) { $scope.Articles = []; var page = 0; $scope.LoadMore = function () { UserService.Articles(page) .success(function (data) { $scope.Articles.push.apply($scope.Articles, data); }); page++; }; $scope.LoadMore(); }); 

Answer 1

im using the page number, save the page number somewhere (I prefer sessionStorage) when you see the detail, when the user returns to the list, reads the page number and loads the page.

this is simple code for the main page controller (list)

 app.controller('ArticlesController', function($scope, UserService) { $scope.Articles = []; var page = 0; $scope.LoadMore = function() { UserService.Articles(page) .success(function(data) { $scope.Articles.push.apply($scope.Articles, data); }); page++; } $scope.LoadArticle = function(articleId) { sessionStorage.setItem("pageNumber", page); /// change path to somewhere you want show your article }; //it will load the page you coming back from if (sessionStorage["pageNumber"]) { page = parseInt(sessionStorage["pageNumber"]); } LoadMore(); }); 

due to the use of sessionStorage, it will be deleted if the user closes the browser or page as expected.