按后退按钮转到其他页面时滚动位置不会重置

Question

我在 angularjs 应用程序中滚动时遇到问题。

目前它有 2 个页面：第一页是客户列表，您可以 select 其中一个并查看其详细信息。第二个是公司列表，同理。

我正在使用一个面板通过 $location.path() 在它们之间导航。该应用程序还有一个后退按钮，使用 $window.history.back().

当您 select 客户或公司列表中的一项时，在它之后，当您按下返回按钮时，您将返回到上一页（客户或公司列表）并恢复滚动位置。我使用的是标准 $window.history.back() 功能，未实现任何自定义功能。

但这就是问题发生的地方：如果没有向任何方向滚动只是转到另一个页面（到其他项目列表）滚动位置不会' t 重置。但是如果你滚动它哪怕只是一点点，它的位置就会重置。另外，如果您不使用后退按钮，一切正常。

所以，问题是：使用$window.history.back()后转到另一个页面时如何重置滚动位置？

我也在使用 infinite-scroll 插件，如果有的话。但即使我将其关闭，也没有任何变化，所以我想问题不在于插件。

Answer 1

我前段时间遇到了类似的问题，想出了一个简单的（但不是很好的解决方案）。

当视图更改时，我在范围内存储了包装器 scrolltop 值。回去时，我再次在包装器上应用了那个值。

实际上我不记得点击后退浏览器按钮时它的表现如何。你需要检查一下。

更改视图并存储 scrollTop 值 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()
});

返回并重新应用 scrollTop 值 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 );

项目在github，所以你可以扫描它。也许这有帮助。 https://github.com/jedrzejchalubek/Reed

Answer 2

您可以通过在启动控制器时触发函数来捕获重新加载事件，前提是这些控制器包装在 Immediately Invoked Function Expression 中。像这样：

(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);

  });
})()

这将强制页面在控制器初始化时具有 0 垂直滚动偏移量，即在 $window.history.back 事件登陆此页面时的 I.E。

Answer 3

这是我从 AngularJS 教程中添加到著名的 phonecatApp 的东西，它有效：

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

按后退按钮转到其他页面时滚动位置不会重置

Scroll position won't reset when go to other page after pressing back button

javascript

angularjs

scroll

infinite-scroll