11

When navigating around the developer's guide for AngularJS, I noticed that I do not go back to my last scroll position when navigating back to a page using the back button. Instead, I go right back to the top. Since the developer's guide is built with AngularJS, I am afraid that, when I build my own web application with AngularJS, it will annoy my users if they have this same experience. Why is this happening, and how can it be fixed? Do I need to use HTML5's history API somehow?

Go to the developer's guide and see this behavior yourself: http://docs.angularjs.org/guide/directive

Zword
  • 5,933
  • 2
  • 22
  • 51
ememem
  • 928
  • 1
  • 10
  • 22
  • 2
    Generally most browsers don't wait for xhrs to do the "scrolling" so when you hit the back button the page is done "scrolling" before the content is "loaded". I haven't investigated any solutions yet though. – DerekR Jun 14 '13 at 04:26

2 Answers2

8

If you want to fix it, I can think of an idea of keeping the track of every route scroll position in a map (in service or on a rootScope) - when you are leaving the page ($routeChangeStart listener) just save the scroll position together with route path.

And when coming to any page, you can check if a record in a map exists for the route path and scroll window to desired position on $routeChangeSuccess event

doodeec
  • 2,909
  • 17
  • 23
0

You should look into the Angular $anchorScroll service.

http://docs.angularjs.org/api/ng.$anchorScroll

It is for exactly your scenario! The sample code pretty much speaks for itself.

aet
  • 6,977
  • 3
  • 24
  • 25