6

I'm using AngularJS (MEAN.io stack) and i'm getting an annoying glitch related to scroll.

When user clicks on a link, the destination page takes the same scroll position than the origin page, instead of staying on top.

For fixing this weird behavior, I used next:

$rootScope.$on("$viewContentLoaded", function () {
  $anchorScroll();
});

But this code makes every single page takes the scroll on top position, which is annoying as well because user must be able to go back and recover the previous scroll position.

Any suggestion? How can i get the desired result?

Thanks!

Edit --------------------

When i've tried to use the ng-view + autoscroll solution, it doesn't work for me and i don't know why.

This is the way i'm using it, in my default.html page which is served by the server:

<body ng-cloak class="ng-cloak" ng-class="{state: true, auth: authPage}" ng-controller="BodyController">

      <div ng-include="'/system/views/header.html'"></div>

    <section class="content">
      <div data-ng-include="'/ceh-admin/views/adminShortcuts.html'"></div>
      <div ng-view autoscroll="true">{% block content %}{% endblock %}</div>
    </section>

    <div data-ng-include="'/system/views/footer.html'"></div>

    {% include '../includes/foot.html' %}

  </body>

Something strange in my HTML code?

Rubén Jiménez
  • 1,835
  • 5
  • 21
  • 29

2 Answers2

0

As per the ngView documentation you need to declare how you want scrolling to be handled.

autoscroll (optional) string Whether ngView should call $anchorScroll to scroll the viewport after the view is updated.

  • If the attribute is not set, disable scrolling.
  • If the attribute is set without value, enable scrolling.
  • Otherwise enable scrolling only if the autoscroll attribute value evaluated as an expression yields a truthy value.

It is disabled by default so you will need to add the following to your markup:

<div ng-view autoscroll></div>

or (as per the docs and depending on your preference):

<div ng-view autoscroll="true"></div>
RichieAHB
  • 2,030
  • 2
  • 20
  • 33
  • It seems that doesn't work for me either. I've edited the main topic showing how i'm using it. Do you see something strange? – Rubén Jiménez Apr 20 '15 at 16:11
  • Do you get any console errors? If you add / remove the autoscroll here (http://jsfiddle.net/dL76co2r/) you can see how it should work? Your markup doesn't look problematic. – RichieAHB Apr 20 '15 at 16:21
0

I'm not the best with angular js, but I got a similar problem and I fixed it using the following code:

<div data-ng-view data-autoscroll="true"></div>

you can take a look the documentation here: angular doc

I hope it's helps

gon250
  • 3,405
  • 6
  • 44
  • 75