当按下后退键转到其他页面时，滚动条位置不会重置

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

本文关键字：滚动条 位置 其他      更新时间：2023-09-26

我在angularjs应用程序中有一个滚动的问题。

目前它有2页:第一页是客户列表，您可以选择其中一个并查看其详细信息。第二个是一个公司列表，它以同样的方式工作。

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

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

但这就是问题发生的地方:如果没有在任何方向上滚动只是转到另一个页面(到其他项目列表)滚动位置不会重置。但如果你稍微滚动一下，它的位置就会重置。此外，如果你不使用后退按钮，一切都可以正常工作。

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

我也使用infinite-scroll插件，如果它的问题。但是，即使我把它关闭，没有任何改变，所以我想问题不是与插件。

我以前也遇到过类似的问题，并提出了一个简单(但不优雅)的解决方案。

当视图改变时，我已经将包装器scrolltop值存储在作用域中。当返回时，我再次在wrapper上应用该值1。

实际上我不记得它的行为在点击后浏览器按钮。你需要检查一下

改变视图和存储scrollTop值https://github.com/jedrzejchalubek/Reed/blob/master/src/app/controller/all.js活用

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

你可以通过在你的控制器初始化中触发函数来捕获重载事件，只要这些控制器被包装在一个立即调用的函数表达式中。像这样:

(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上。返回事件降落在这个页面上。

这是我从AngularJS教程中添加到著名的phonecatApp的内容，它可以工作了:

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