All geek questions in one place

Scrolling is always on top in AngularJS

I am using AngularJS (the MEAN.io stack) and I am getting an annoying scroll-related crash.

When the user clicks on the link, the landing page takes the same scroll position as the original page, instead of staying on top.

To fix this strange behavior, I used the following:

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

But this code forces each page to pick up the scroll in the up position, which is also annoying because the user should be able to go back and restore the previous scroll position.

Any suggestion? How can I get the desired result?

Thanks!

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

When I tried to use the ng-view + autoscroll solution, it does not work for me, and I do not know why.

This is how I use it on my default.html page 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>

Is there something strange in my HTML?

+6
source share
2 answers

According to the ngView documentation, you need to declare how you want the scroll to be handled.

autoscroll (optional) string. Should ngView call $ anchorScroll to scroll through the view after updating the view.

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

Disabled by default, so you need to add the following markup:

 <div ng-view autoscroll></div>

or (according to the documents and depending on your preferences):

 <div ng-view autoscroll="true"></div>
0
source

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

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

you can see the documentation here: angular doc

I hope this helps

0
source

Source: https://habr.com/ru/post/985534/

More articles:


All Articles