Zmiana trasy nie przewija do góry na nowej stronie

Znalazłem jakieś niepożądane, przynajmniej dla mnie, zachowanie podczas zmiany trasy. W kroku 11 samouczka http://angular.github.io/angular-phonecat/step-11/app/#/phones możesz zobaczyć listę telefonów. Jeśli przewiniesz na dół i klikniesz jeden z najnowszych, zobaczysz, że zwoju nie ma na górze, a raczej w środku.

Znalazłem to również w jednej z moich aplikacji i zastanawiałem się, jak mogę to przewinąć do góry. Mogę to zrobić ręcznie, ale uważam, że powinien istnieć inny elegancki sposób, którego nie znam.

Czy istnieje elegancki sposób przewijania na górę, gdy zmienia się trasa?

Problem polega na tym, że twój ngView zachowuje pozycję przewijania podczas ładowania nowego widoku. Możesz poinstruować, $anchorScrollaby „przewinąć rzutnię po zaktualizowaniu widoku” ( dokumenty są nieco niejasne, ale przewijanie tutaj oznacza przewijanie do góry nowego widoku).

Rozwiązaniem jest dodanie autoscroll="true"do elementu ngView:

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

Po prostu uruchom ten kod

$rootScope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {

    window.scrollTo(0, 0);

});

Ten kod działał świetnie dla mnie .. Mam nadzieję, że będzie również działał świetnie dla Ciebie .. Wszystko, co musisz zrobić, to po prostu wstrzyknąć $ anchorScroll do bloku uruchamiania i zastosować funkcję detektora do rootScope, jak to zrobiłem w poniższym przykładzie ..

 angular.module('myAngularApp')
.run(function($rootScope, Auth, $state, $anchorScroll){
    $rootScope.$on("$locationChangeSuccess", function(){
        $anchorScroll();
    });

Oto kolejność wywoływania modułu Angularjs:

1. app.config()
2. app.run()
3. directive's compile functions (if they are found in the dom)
4. app.controller()
5. directive's link functions (again, if found)

RUN BLOCK jest wykonywany po utworzeniu wtryskiwacza i służy do uruchomienia aplikacji. Oznacza to, że po przekierowaniu do nowego widoku trasy słuchacz w bloku uruchamiania wywołuje metodę

$ anchorScroll ()

i możesz teraz zobaczyć, że przewijanie zaczyna się na górze z nowym widokiem trasy :)

Po godzinie lub dwóch prób każdą kombinację ui-view autoscroll=true, $stateChangeStart, $locationChangeStart, $uiViewScrollProvider.useAnchorScroll(), $provide('$uiViewScroll', ...), i wiele innych, nie mogłem dostać zwój-to-top-on-nowej stronie, aby działać zgodnie z oczekiwaniami.

To ostatecznie działało dla mnie. Przechwytuje pushState i replaceState i aktualizuje pozycję przewijania tylko po przejściu do nowych stron (przycisk Wstecz / Dalej zachowuje pozycje przewijania):

.run(function($anchorScroll, $window) {
  // hack to scroll to top when navigating to new URLS but not back/forward
  var wrap = function(method) {
    var orig = $window.window.history[method];
    $window.window.history[method] = function() {
      var retval = orig.apply(this, Array.prototype.slice.call(arguments));
      $anchorScroll();
      return retval;
    };
  };
  wrap('pushState');
  wrap('replaceState');
})

Oto moje (pozornie) solidne, kompletne i (dość) zwięzłe rozwiązanie. Wykorzystuje styl zgodny z minimalizacją (i dostęp do modułu angular.module (NAME)).

angular.module('yourModuleName').run(["$rootScope", "$anchorScroll" , function ($rootScope, $anchorScroll) {
    $rootScope.$on("$locationChangeSuccess", function() {
                $anchorScroll();
    });
}]);

PS Odkryłem, że funkcja automatycznego przewijania nie miała żadnego wpływu, czy jest ustawiona na prawda czy fałsz.

Używając routera interfejsu użytkownika angularjs, robię to:

    .state('myState', {
        url: '/myState',
        templateUrl: 'app/views/myState.html',
        onEnter: scrollContent
    })

Z:

var scrollContent = function() {
    // Your favorite scroll method here
};

Nigdy nie zawodzi na żadnej stronie i nie jest globalny.

Informacje dla każdego, kto napotka problem opisany w tytule (tak jak ja), który również korzysta z wtyczki AngularUI Router ...

Zgodnie z pytaniem i odpowiedzią na to pytanie SO router angular-ui przeskakuje na dół strony podczas zmiany tras.
Nie możesz dowiedzieć się, dlaczego strona ładuje się na dole? Problem automatycznego przewijania Angular UI-Router

Jednak, jak mówi odpowiedź, możesz wyłączyć to zachowanie, mówiąc autoscroll="false"na swoim ui-view.

Na przykład:

<div ui-view="pagecontent" autoscroll="false"></div>
<div ui-view="sidebar" autoscroll="false"></div> 

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view

możesz użyć tego javascript

$anchorScroll()

Jeśli używasz interfejsu użytkownika routera, możesz go używać (podczas uruchamiania)

$rootScope.$on("$stateChangeSuccess", function (event, currentState, previousState) {
    $window.scrollTo(0, 0);
});

Znalazłem to rozwiązanie. Jeśli przejdziesz do nowego widoku, funkcja zostanie wykonana.

var app = angular.module('hoofdModule', ['ngRoute']);

    app.controller('indexController', function ($scope, $window) {
        $scope.$on('$viewContentLoaded', function () {
            $window.scrollTo(0, 0);
        });
    });

Ustawienie autoScroll na wartość true nie było dla mnie problemem, więc wybrałem inne rozwiązanie. Zbudowałem usługę, która zaczepia się za każdym razem, gdy zmienia się trasa i która korzysta z wbudowanej usługi $ anchorScroll do przewijania na górę. Pracuje dla mnie :-).

Usługa:

 (function() {
    "use strict";

    angular
        .module("mymodule")
        .factory("pageSwitch", pageSwitch);

    pageSwitch.$inject = ["$rootScope", "$anchorScroll"];

    function pageSwitch($rootScope, $anchorScroll) {
        var registerListener = _.once(function() {
            $rootScope.$on("$locationChangeSuccess", scrollToTop);
        });

        return {
            registerListener: registerListener
        };

        function scrollToTop() {
            $anchorScroll();
        }
    }
}());

Rejestracja:

angular.module("mymodule").run(["pageSwitch", function (pageSwitch) {
    pageSwitch.registerListener();
}]);

Trochę późno na imprezę, ale wypróbowałem każdą możliwą metodę i nic nie działało poprawnie. Oto moje eleganckie rozwiązanie:

Używam kontrolera, który zarządza wszystkimi moimi stronami za pomocą interfejsu użytkownika. Pozwala mi przekierowywać użytkowników, którzy nie są uwierzytelnieni lub zatwierdzeni do odpowiedniej lokalizacji. Większość ludzi umieszcza swoje oprogramowanie pośrednie w konfiguracji aplikacji, ale wymagałem kilku żądań HTTP, dlatego globalny kontroler działa dla mnie lepiej.

Mój index.html wygląda następująco:

<main ng-controller="InitCtrl">
    <nav id="top-nav"></nav>
    <div ui-view></div>
</main>

Mój initCtrl.js wygląda następująco:

angular.module('MyApp').controller('InitCtrl', function($rootScope, $timeout, $anchorScroll) {
    $rootScope.$on('$locationChangeStart', function(event, next, current){
        // middleware
    });
    $rootScope.$on("$locationChangeSuccess", function(){
        $timeout(function() {
            $anchorScroll('top-nav');
       });
    });
});

Wypróbowałem każdą możliwą opcję, ta metoda działa najlepiej.

Wszystkie powyższe odpowiedzi psują oczekiwane zachowanie przeglądarki. Większość ludzi chce czegoś, co przewinie na górę, jeśli jest to „nowa” strona, ale wróci do poprzedniej pozycji, jeśli przejdziesz tam za pomocą przycisku Wstecz (lub Dalej).

Jeśli przyjmiesz tryb HTML5, okaże się to łatwe (chociaż jestem pewien, że niektórzy bystrzy ludzie mogą dowiedzieć się, jak uczynić to bardziej eleganckim!):

// Called when browser back/forward used
window.onpopstate = function() { 
    $timeout.cancel(doc_scrolling); 
};

// Called after ui-router changes state (but sadly before onpopstate)
$scope.$on('$stateChangeSuccess', function() {
    doc_scrolling = $timeout( scroll_top, 50 );

// Moves entire browser window to top
scroll_top = function() {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
}

Działa to tak, że router zakłada, że ​​przewinie się do góry, ale nieco opóźnia, aby dać przeglądarce szansę na zakończenie. Jeśli przeglądarka powiadomi nas wtedy, że zmiana była spowodowana nawigacją wstecz / do przodu, anuluje limit czasu i przewijanie nigdy nie nastąpi.

Użyłem surowych documentpoleceń do przewijania, ponieważ chcę przenieść się na całą górę okna. Jeśli chcesz tylko ui-viewprzewijać, ustaw miejsce, w autoscroll="my_var"którym kontrolujesz, my_varkorzystając z powyższych technik. Ale myślę, że większość ludzi będzie chciała przewinąć całą stronę, jeśli przejdziesz na stronę jako „nową”.

Powyższych zastosowań UI-routera, choć można użyć NG-trasę zamiast poprzez zamianę $routeChangeSuccessna $stateChangeSuccess.

Żadna z podanych odpowiedzi nie rozwiązała mojego problemu. Używam animacji między widokami, a przewijanie zawsze odbywa się po animacji. Rozwiązaniem, które znalazłem, aby przewinięcie do góry nastąpiło przed animacją, jest następująca dyrektywa:

yourModule.directive('scrollToTopBeforeAnimation', ['$animate', function ($animate) {
    return {
        restrict: 'A',
        link: function ($scope, element) {
            $animate.on('enter', element, function (element, phase) {

                if (phase === 'start') {

                    window.scrollTo(0, 0);
                }

            })
        }
    };
}]);

Wstawiłem go do mojego widoku w następujący sposób:

<div scroll-to-top-before-animation>
    <div ng-view class="view-animation"></div>
</div>

Proste rozwiązanie, dodaj scrollPositionRestorationwłączony główny moduł trasy.
Lubię to:

const routes: Routes = [

 {
   path: 'registration',
   loadChildren: () => RegistrationModule
},
];

 @NgModule({
  imports: [
   RouterModule.forRoot(routes,{scrollPositionRestoration:'enabled'})
  ],
 exports: [
 RouterModule
 ]
 })
  export class AppRoutingModule { }

Spróbuj tego http://ionicframework.com/docs/api/service/ $ ionicScrollDelegate /

Przewija do góry listy scrollTop ()

W końcu dostałem to, czego potrzebowałem.

Musiałem przewinąć na górę, ale chciałem, żeby niektóre przejścia tego nie zrobiły

Możesz to kontrolować na poziomie trasy po trasie.
Łączę powyższe rozwiązanie przez @wkonkel i dodam prosty noScroll: trueparametr do niektórych deklaracji trasy. Potem łapię to w trakcie przejścia.

Podsumowując: To unosi się na górę strony przy nowych przejściach, nie unosi się na górę na Forward/ Backprzejściach i pozwala zastąpić to zachowanie, jeśli to konieczne.

Kod: (poprzednie rozwiązanie plus dodatkowa opcja noScroll)

  // hack to scroll to top when navigating to new URLS but not back/forward
  let wrap = function(method) {
    let orig = $window.window.history[method];
    $window.window.history[method] = function() {
      let retval = orig.apply(this, Array.prototype.slice.call(arguments));
      if($state.current && $state.current.noScroll) {
        return retval;
      }
      $anchorScroll();
      return retval;
    };
  };
  wrap('pushState');
  wrap('replaceState');

Włóż to do swojego app.runbloku i wstrzyknij $state...myApp.run(function($state){...})

Następnie, jeśli nie chcesz przewijać do góry strony, utwórz trasę taką jak ta:

.state('someState', {
  parent: 'someParent',
  url: 'someUrl',
  noScroll : true // Notice this parameter here!
})

To działało dla mnie, w tym automatyczne przewijanie

<div class="ngView" autoscroll="true" >