Как сохранить полосу прокрутки браузера вверху при изменении маршрутов в AngularJS?

Question

Как сохранить полосу прокрутки браузера вверху при изменении маршрутов в AngularJS?

0

У меня есть ситуация, если пользователь прокручивается вниз в браузере на домашней странице и выполняет действие на любом событии, которое переносит его на другую страницу или маршрут, положение полосы прокрутки аналогично домашней странице. Как я могу держать панель прокрутки сверху, когда пользователь перенаправляется на разные страницы? Я пробовал автопрокрутку в нижнем коде, но это, похоже, не работает. Любое предложение будет оценено. благодаря

index.html

   <!DOCTYPE html>
    <html ng-app="riskAssessmentApp">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <meta name="viewport" content="width=device-width">

            <title>Risk Assessment</title>

            <link rel="icon" type="image/x-icon" href="favicon.ico">

            <!-- bootstrap.css contains normalize, so it needs to go first  -->
            <!-- build:css(.tmp) styles/main.css -->
            <link rel="stylesheet" href="bower_components/orcit-theme/dist/styles/bootstrap.css">
            <link rel="stylesheet" href="bower_components/orcit-theme/dist/styles/kendo.bootstrap.css">
            <link rel="stylesheet" href="bower_components/orcit-theme/dist/styles/kendo.common-bootstrap.css">
            <link rel="stylesheet" href="bower_components/orcit-theme/dist/styles/orcit.css">
            <link rel="stylesheet" href="bower_components/bac-multiselect/bacMultiselect.css">
            <link rel="stylesheet" href="styles/site.css">
            <link rel="stylesheet" href="styles/bootstrap-override.css">
            <link rel="stylesheet" href="styles/kendo-override.css">
            <link rel="stylesheet" href="styleNew/multiselect-treeview.css">
            <link rel="stylesheet" href="styleNew/main.css">
            <link rel="stylesheet" href="styles/style.css">
            <!-- endbuild -->
        </head>
        <body>
            <div ui-view autoscroll="false"></div>

            <!-- build:js scripts/scripts.js -->
            <script src="bower_components/orcit-bower/src/jquery/dist/jquery.js"></script>
            <script src="bower_components/orcit-bower/src/angular/angular.js"></script>
            <script src="bower_components/orcit-bower/src/angular-cookies/angular-cookies.js"></script>
            <script src="bower_components/orcit-bower/src/angular-off-click/offClick.js"></script>
            <script src="bower_components/orcit-bower/src/angular-resource/angular-resource.js"></script>
            <script src="bower_components/orcit-bower/src/spin.js/spin.js"></script>
            <script src="bower_components/orcit-bower/src/angular-spinner/angular-spinner.js"></script>
            <script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/accordion/accordion.js"></script>
            <script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/bindHtml/bindHtml.js"></script>
            <script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/collapse/collapse.js"></script>
            <script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/modal/modal.js"></script>
            <script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/position/position.js"></script>
            <script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/tooltip/tooltip.js"></script>
            <script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/transition/transition.js"></script>
            <script src="bower_components/orcit-bower/src/angular-ui-router/angular-ui-router.js"></script>

            <script src="bower_components/orcit-bower/src/angular/angular.min.js"></script>
            <script src="bower_components/orcit-bower/src/kendo/js/kendo.web.min.js"></script>
            <script src="bower_components/orcit-bower/src/kendo/js/kendo.all.min.js"></script>


            <script src="bower_components/bac-multiselect/bacMultiselect.js"></script>
            <script src="bower_components/kendo-multiselect-treeview/kendo-multiselect-treeview.js"></script>
    </body>
    </html>

scroll.js

angular.module('riskAssessmentApp').run(function($rootScope, $anchorScroll) {
    /* scroll to the top of the page after the route successfully changes */
    $rootScope.$on('$routeChangeSuccess', function() {
        $anchorScroll();
    });
});

aftab 21 июль 2015, в 18:33

Источник

Теги:

javascript

angularjs

browser

2 ответа

Ещё вопросы

Muhammad Reda · Answer 1 · 2015-07-21T14-20-00.000Z

Вы можете использовать $anchorScroll для прокрутки до верхней части страницы при каждом изменении маршрута.

angular.module('YOUR_APP')
    .run(function($rootScope, $anchorScroll) {
        /* scroll to the top of the page after the route successfully changes */
        $rootScope.$on('$routeChangeSuccess', function() {
            $anchorScroll();
        });
    })
    .config(function($uiViewScrollProvider) {
        $uiViewScrollProvider.useAnchorScroll();
    });

Нет! я отредактировал мой вопрос с вашим кодом, но он все еще не работает, я создал новый файл js и добавил в него модуль. Нужно ли вводить зависимость для $ anchorScroll в контроллер?
Чтобы использовать anchorScroll с ui-router, вам нужно добавить этот $uiViewScrollProvider.useAnchorScroll()
Как подсказывает @Mindstormy, вам нужно использовать $uiViewScrollProvider.useAnchorScroll() . Я обновил ответ.

aftab · Answer 2 · 2015-07-21T15-49-00.000Z

Ниже код решил мою проблему..

angular.module('Your-App').run(function($rootScope,$window) {
      /* scroll to the top of the page after the route successfully changes */
    $rootScope.$on('$viewContentLoaded', function(){
      $window.scrollTo(0, 0);
  });
});