Scroll-Position wird nicht zurückgesetzt, wenn auf andere Seite nach dem Zurückdrücken Schaltfläche

Question

Ich habe ein Problem mit dem Scrollen in Angularjs App.

Im Moment hat es 2 Seiten: Die erste Seite ist eine Liste von Kunden, Sie können eine von ihnen auswählen und ihre Details sehen. Der zweite ist eine Liste von Unternehmen, es funktioniert auf die gleiche Weise.

Ich verwende ein Panel, um zwischen ihnen zu navigieren mit $location.path(). Und die App hat auch eine Zurück-Taste, mit $window.history.back().

Wenn Sie einen der Artikel in der Kunden- oder Firmenliste auswählen und danach den Knopf zurück drücken, kehren Sie zur vorherigen Seite (Kunden- oder Firmenliste) mit Wiederherstellung der Bildlaufposition zurück. Ich benutze Standard-$window.history.back()-Funktion, keine benutzerdefinierte implementiert.

Aber hier ist, wo das Problem auftritt: wenn ohne einfach auf eine andere Seite gehen in jede Richtung zu scrollen (auf andere Liste der Elemente) Scrollposition nicht zurückgesetzt. Aber wenn Sie es nur ein wenig scrollen, wird seine Position zurückgesetzt. Auch wenn Sie den Zurück-Knopf nicht benutzen, funktioniert alles gut.

So, ist die Frage: Wie können wir Scroll-Position zurücksetzen, wenn Sie auf eine andere Seite nach der Verwendung von $window.history.back() gehen?

Ich verwende auch infinite-scroll Plugin, wenn es darauf ankommt. Aber selbst wenn ich es ausgeschaltet habe, hat sich nichts geändert, also denke ich, das Problem ist nicht mit dem Plugin.

Answer 1

Ich hatte simlar Problem vor einiger Zeit und kommen mit einfachen (aber nicht elegante Lösung).

Wenn die Ansicht geändert wird, habe ich den Wrapper Scrolltop-Wert im Bereich. Wenn ich zurück gehe, habe ich diesen Wert noch einmal auf Wrapper angewendet.

Eigentlich erinnere ich mich nicht, wie es sich bei Klick in Backbroswear-Taste verhalten. Sie müssen das überprüfen.

---

ändern Ansicht und speichern scrollTop Wert https://github.com/jedrzejchalubek/Reed/blob/master/src/app/controller/all.js#L20

angular.extend($scope.view, { 
    panel: false, 
    section: 'single', 
    single: el, 
    scrollPosition: $('#thumbs').scrollTop() 
}); 

Gehen wir zurück und erneut anwenden scrollTop Wert https://github.com/jedrzejchalubek/Reed/blob/master/src/app/directives/back-to-list.js#L14

scope.$apply(function() { 
    scope.view.section = 'list'; 
    scope.view.panel = false; 
}); 
$('#thumbs').scrollTop(scope.view.scrollPosition); 

Projekt auf Github, so dass Sie es scannen. Vielleicht hilft das. https://github.com/jedrzejchalubek/Reed

Answer 2

Sie können Nachladeereignisse abfangen, indem Sie bei der Initialisierung Ihres Controllers Funktionen auslösen, vorausgesetzt, diese Controller sind in eine Immediately Invoked Function Expression eingebunden. Wie so:

(function() { 


angular.module("pstat") 
     .controller("homeCtrl", homeCtrl); 

    homeCtrl.$inject = ['$log', 'dataService', 'localStorageService', '$http']; 
    function homeCtrl ($log, dataService, localStorageService, $http) { 
    var vm = this; 
    $(document).getElementById("yourId").scrollTop(0); 

    }); 
})() 

Dies wird die Seite zwingt 0 vertikale Scroll-Offset zu haben, wenn der Controller initialisiert, das heißt auf der $ window.history.back Veranstaltung Landung auf dieser Seite.

Answer 3

Das, was ich zu dem berühmten phonecatApp aus dem AngularJS Tutorial hinzugefügt und es funktioniert:

phonecatApp.run(function($rootScope, $window) { 
     $rootScope.$on('$viewContentLoaded', function(){ 
      $(document).ready(function(){ window.scrollTo(0, 0); }); 
     }); 
    });