Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to scroll to the loaded ui-view

I have a ui-view inside of my page. When some button is clicked, the ui-view is loaded and replaced by some HTML. I want the page to be scrolled down to the just-loaded part of the page.

Is this possible? Thanks in advance

like image 961
John Avatar asked Sep 30 '13 11:09

John


2 Answers

The ui-router module has been updated to scroll to the ui-view by default. You can add the autoscroll="false" attribute on <div ui-view> to prevent this. The default setting is true which scrolls to the ui-view upon state change.

I would think it should be the other way around where you have to set the autoscroll to enable rather than disable but this is the functionality of the updated ui-router.

You can read about it here.

In the linked Github issue, it says that the default value is autoscroll="expr" but I have found that expr does nothing and that the default value is autoscroll="true" (which makes more sense).

like image 66
Tina Avatar answered Sep 23 '22 07:09

Tina


On Route change it will scroll to the top of the page.

 $scope.$on('$routeChangeSuccess', function () {
      window.scrollTo(0, 0);
  });

put this code on your controller. (Change the value as per your requirements)

like image 22
Praveen M P Avatar answered Sep 19 '22 07:09

Praveen M P