Thay đổi tuyến đường không cuộn lên đầu trong trang mới

Tôi đã tìm thấy một số hành vi không mong muốn, ít nhất là đối với tôi, khi tuyến đường thay đổi. Trong bước 11 của hướng dẫn http://angular.github.io/angular-phonecat/step-11/app/#/phones bạn có thể xem danh sách điện thoại. Nếu bạn cuộn xuống phía dưới và nhấp vào một trong những cái mới nhất, bạn có thể thấy rằng cuộn không ở trên cùng, thay vào đó là loại ở giữa.

Tôi cũng đã tìm thấy điều này trong một trong những ứng dụng của mình và tôi đã tự hỏi làm thế nào tôi có thể đưa nó lên đầu trang. Tôi có thể làm điều đó một cách thủ công, nhưng tôi nghĩ rằng nên có cách thanh lịch khác để làm điều này mà tôi không biết.

Vì vậy, có một cách thanh lịch để cuộn lên đầu khi tuyến đường thay đổi?

Vấn đề là ngView của bạn giữ được vị trí cuộn khi tải chế độ xem mới. Bạn có thể hướng dẫn $anchorScroll"cuộn chế độ xem sau khi chế độ xem được cập nhật" (các tài liệu hơi mơ hồ, nhưng cuộn ở đây có nghĩa là cuộn lên trên cùng của chế độ xem mới).

Giải pháp là thêm autoscroll="true"vào phần tử ngView của bạn:

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

Chỉ cần đặt mã này để chạy

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

    window.scrollTo(0, 0);

});

Mã này đã làm việc rất tốt cho tôi .. Tôi hy vọng nó cũng sẽ làm việc tốt cho bạn .. Tất cả những gì bạn phải làm chỉ là tiêm $ anchorScroll vào khối chạy của bạn và áp dụng chức năng nghe cho rootScope như tôi đã làm trong ví dụ dưới đây ..

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

Đây là thứ tự gọi của Mô-đun 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 được thực thi sau khi trình tạo được tạo và được sử dụng để khởi động ứng dụng .. có nghĩa là khi bạn chuyển hướng đến chế độ xem tuyến đường mới, trình nghe trong khối chạy sẽ gọi

$ anchorScroll ()

và bây giờ bạn có thể thấy cuộn bắt đầu lên trên cùng với chế độ xem được định tuyến mới :)

Sau một hoặc hai giờ cố gắng mỗi sự kết hợp của ui-view autoscroll=true, $stateChangeStart, $locationChangeStart, $uiViewScrollProvider.useAnchorScroll(), $provide('$uiViewScroll', ...), và nhiều người khác, tôi không thể có được cuộn-to-top-on-mới-trang để làm việc như mong đợi.

Đây cuối cùng là những gì làm việc cho tôi. Nó nắm bắt PushState và thay thếState và chỉ cập nhật vị trí cuộn khi các trang mới được điều hướng đến (nút quay lại / chuyển tiếp giữ vị trí cuộn của chúng):

.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');
})

Đây là giải pháp ngắn gọn (dường như) mạnh mẽ, đầy đủ và (khá) của tôi. Nó sử dụng kiểu tương thích thu nhỏ (và truy cập angular.module (NAME) vào mô-đun của bạn).

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

PS Tôi thấy rằng điều tự động ghi không có tác dụng cho dù được đặt thành đúng hay sai.

Sử dụng Bộ định tuyến UI angularjs, những gì tôi đang làm là:

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

Với:

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

Nó không bao giờ thất bại trên bất kỳ trang nào, và nó không phải là toàn cầu.

FYI cho bất kỳ ai gặp phải vấn đề được mô tả trong tiêu đề (như tôi đã làm), người cũng đang sử dụng plugin AngularUI Router ...

Khi được hỏi và trả lời trong câu hỏi SO này, bộ định tuyến góc cạnh nhảy xuống cuối trang khi bạn thay đổi tuyến đường.
Không thể hiểu tại sao tải trang ở dưới cùng? Vấn đề tự động định tuyến UI-Router

Tuy nhiên, như câu trả lời, bạn có thể tắt hành vi này bằng cách nói autoscroll="false"trên ui-view.

Ví dụ:

<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

bạn có thể sử dụng javascript này

$anchorScroll()

Nếu bạn sử dụng bộ định tuyến ui, bạn có thể sử dụng (đang chạy)

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

Tôi tìm thấy giải pháp này. Nếu bạn đi đến một khung nhìn mới, chức năng sẽ được thực thi.

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

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

Đặt autoScroll thành true không phải là mẹo đối với tôi, vì vậy tôi đã chọn một giải pháp khác. Tôi đã xây dựng một dịch vụ móc nối mỗi khi tuyến thay đổi và sử dụng dịch vụ $ anchorScroll tích hợp để cuộn lên trên cùng. Làm việc cho tôi :-).

Dịch vụ:

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

Đăng ký:

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

Đến bữa tiệc muộn một chút, nhưng tôi đã thử mọi phương pháp có thể, và không có gì hoạt động chính xác. Đây là giải pháp tao nhã của tôi:

Tôi sử dụng bộ điều khiển chi phối tất cả các trang của mình bằng bộ định tuyến ui. Nó cho phép tôi chuyển hướng người dùng không được xác thực hoặc xác thực đến một vị trí thích hợp. Hầu hết mọi người đặt phần mềm trung gian của họ trong cấu hình ứng dụng của họ, nhưng tôi yêu cầu một số yêu cầu http, do đó, bộ điều khiển toàn cầu hoạt động tốt hơn đối với tôi.

Index.html của tôi trông giống như:

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

InitCtrl.js của tôi trông giống như:

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');
       });
    });
});

Tôi đã thử mọi tùy chọn có thể, phương pháp này hoạt động tốt nhất.

Tất cả các câu trả lời trên phá vỡ hành vi trình duyệt dự kiến. Điều mà hầu hết mọi người muốn là thứ gì đó sẽ cuộn lên trên cùng nếu đó là trang "mới", nhưng quay lại vị trí trước đó nếu bạn đến đó thông qua nút Quay lại (hoặc Chuyển tiếp).

Nếu bạn giả sử chế độ HTML5, điều này hóa ra rất dễ dàng (mặc dù tôi chắc rằng một số người thông minh ngoài kia có thể tìm ra cách làm cho điều này thanh lịch hơn!):

// 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;
}

Cách thức hoạt động của nó là bộ định tuyến giả định rằng nó sẽ di chuyển lên trên cùng, nhưng trì hoãn một chút để cung cấp cho trình duyệt một cơ hội để kết thúc. Nếu trình duyệt sau đó thông báo cho chúng tôi rằng thay đổi là do điều hướng Quay lại / Chuyển tiếp, nó sẽ hủy thời gian chờ và cuộn không bao giờ xảy ra.

Tôi đã sử dụng documentcác lệnh thô để cuộn vì tôi muốn di chuyển đến toàn bộ trên cùng của cửa sổ. Nếu bạn chỉ muốn ui-viewcuộn, sau đó đặt autoscroll="my_var"nơi bạn điều khiển my_varbằng các kỹ thuật trên. Nhưng tôi nghĩ rằng hầu hết mọi người sẽ muốn cuộn toàn bộ trang nếu bạn đang đi đến trang là "mới".

Ở trên sử dụng ui-router, mặc dù bạn có thể sử dụng ng-route thay vì hoán đổi $routeChangeSuccesscho $stateChangeSuccess.

Không có câu trả lời nào cung cấp giải quyết vấn đề của tôi. Tôi đang sử dụng một hình ảnh động giữa các chế độ xem và cuộn sẽ luôn xảy ra sau hình ảnh động. Giải pháp tôi tìm thấy để việc cuộn lên trên cùng xảy ra trước khi hoạt hình là chỉ thị sau:

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

            })
        }
    };
}]);

Tôi đã chèn nó vào quan điểm của tôi như sau:

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

Giải pháp đơn giản, thêm scrollPositionRestorationvào mô-đun tuyến đường chính được kích hoạt.
Như thế này:

const routes: Routes = [

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

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

Hãy thử http://ionicframework.com/docs/api/service/ $ ionicScrollDelegate /

Nó không cuộn lên đầu danh sách scrollTop ()

Cuối cùng tôi đã nhận được những gì tôi cần.

Tôi cần phải cuộn lên trên cùng, nhưng muốn một số chuyển tiếp không

Bạn có thể kiểm soát điều này ở cấp độ tuyến đường.
Tôi đang kết hợp giải pháp trên bởi @wkonkel và thêm một noScroll: truetham số đơn giản vào một số khai báo tuyến đường. Sau đó, tôi đang nắm bắt điều đó trong quá trình chuyển đổi.

Tất cả trong tất cả: Điều này nổi lên trên cùng của trang trên các chuyển tiếp mới, nó không nổi lên đầu Forward/ Backchuyển tiếp và nó cho phép bạn ghi đè hành vi này nếu cần thiết.

Mã: (giải pháp trước đó cộng với tùy chọn noScroll bổ sung)

  // 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');

Đặt nó trong app.runkhối của bạn và tiêm $state...myApp.run(function($state){...})

Sau đó, nếu bạn không muốn cuộn lên đầu trang, hãy tạo một tuyến đường như thế này:

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

Điều này làm việc cho tôi bao gồm cả autoscroll

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