Прокрутите страницу вверху после изменения маршрута (вложенные div)

Я использую angularJS с ngRoute. Когда пользователь прокручивается вниз, а затем изменяет маршрут, прокручивается и новая страница. Я прочитал об использовании autoscroll="true" с атрибутом ngView. Но моя проблема в том, что из-за моей структуры HTML прокручивающийся контейнер равен NOT my ngView. В моем случае это выглядит вроде этого:Прокрутите страницу вверху после изменения маршрута (вложенные div)

<body> 
    <!-- main container allows overflow scrolling and should be scrolled to top --> 
    <main> 
     <!-- this container has no scrolling --> 
     <div ngView><!-- content comes here --></div> 
    </main> 
</body>

Так вот почему autoscroll="true" на моем ngView ничего не делает, так как нет ничего, чтобы прокрутить. Что нужно прокрутить, это контейнер выше моего ngView (main в этом случае).

Как я могу это сделать? Я бы предпочел как можно меньше/проще JS. Решение HTML, такое как свойство autoscroll, было бы неплохо.

источник

2015-08-14 Fidel90

Я выяснил, как это сделать. Я создал директиву, которая будет прокручиваться до вершины моего контейнера каждый раз, когда маршрут был изменен. Я могу слушать это через событие $routeChangeSuccess в $rootScope. Функция scrollTop() является частью jQuery, который я использую в любом случае.

HTML:

<!-- scrollable content container --> 
<main id="pageWrap" scroll-top-on-route-change> 
    <!-- non-scrollable page content, templates inserted by ngView --> 
    <div id="pageContent" ng-view></div> 
</main>

JS:

app.directive("scrollTopOnRouteChange", [ 
    "$rootScope", 
    function ($rootScope) { 
     return { 
      restrict: "A", 
      link : function ($scope, $element) { 
       $rootScope.$on("$routeChangeSuccess", function() { 
        $element.scrollTop(0); 
       }); 
      } 
     }; 
    } 
]);

источник

2015-08-17 07:07:11 Fidel90

Прокрутите страницу вверху после изменения маршрута (вложенные div)

ответ

Смежные вопросы