การเปลี่ยนเส้นทางไม่ได้เลื่อนไปด้านบนในหน้าใหม่

ฉันพบพฤติกรรมที่ไม่พึงประสงค์อย่างน้อยสำหรับฉันเมื่อเส้นทางเปลี่ยนไป ในขั้นตอนที่ 11 ของบทช่วยสอนhttp://angular.github.io/angular-phonecat/step-11/app/#/phones คุณสามารถดูรายการโทรศัพท์ หากคุณเลื่อนไปที่ด้านล่างและคลิกที่หนึ่งในล่าสุดคุณจะเห็นว่าการเลื่อนนั้นไม่ได้อยู่ที่ด้านบนแทนที่จะเป็นแบบกึ่งกลาง

ฉันพบสิ่งนี้ในหนึ่งในแอพของฉันด้วยและฉันก็สงสัยว่าฉันจะทำให้มันเลื่อนไปด้านบนได้อย่างไร ฉันสามารถทำได้ด้วยตนเอง แต่ฉันคิดว่าควรมีวิธีที่สง่างามในการทำสิ่งนี้ซึ่งฉันไม่รู้

ดังนั้นมีวิธีที่สวยงามเพื่อเลื่อนไปด้านบนเมื่อเส้นทางเปลี่ยน?

ปัญหาคือngViewของคุณยังคงตำแหน่งการเลื่อนเมื่อโหลดมุมมองใหม่ คุณสามารถแนะนำ$anchorScrollให้ "เลื่อนวิวพอร์ตหลังจากอัปเดตมุมมองแล้ว" ( เอกสารนั้นค่อนข้างคลุมเครือ แต่การเลื่อนที่นี่หมายถึงการเลื่อนไปที่ด้านบนของมุมมองใหม่)

ทางออกคือการเพิ่มautoscroll="true"องค์ประกอบ ngView ของคุณ:

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

เพียงแค่ใส่รหัสนี้เพื่อเรียกใช้

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

    window.scrollTo(0, 0);

});

รหัสนี้ใช้งานได้ดีสำหรับฉัน .. ฉันหวังว่ามันจะทำงานได้ดีสำหรับคุณ .. สิ่งที่คุณต้องทำก็แค่ฉีด $ anchorScroll กับ run block ของคุณและใช้ฟังก์ชั่น listener กับ rootScope เหมือนที่ฉันทำในตัวอย่างด้านล่าง ..

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

นี่คือลำดับการเรียกของโมดูล 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 ถูกเรียกใช้งานหลังจากสร้างหัวฉีดและใช้เพื่อเริ่มต้นแอปพลิเคชัน .. ซึ่งหมายความว่าเมื่อคุณเปลี่ยนเส้นทางไปยังมุมมองเส้นทางใหม่ผู้ฟังในบล็อกที่เรียกใช้จะเรียก

$ anchorScroll ()

และตอนนี้คุณสามารถเห็นการเลื่อนเริ่มขึ้นไปด้านบนด้วยมุมมองที่กำหนดเส้นทางใหม่ :)

หลังจากที่หนึ่งหรือสองชั่วโมงของการพยายามทุกชุดของui-view autoscroll=true, $stateChangeStart, $locationChangeStart, $uiViewScrollProvider.useAnchorScroll(),$provide('$uiViewScroll', ...)และอื่น ๆ อีกมากมายที่ฉันไม่สามารถได้รับการเลื่อนไปด้านบน-on-ใหม่หน้าในการทำงานตามที่คาดไว้

นี่คือสิ่งที่ได้ผลสำหรับฉันในที่สุด มันจับ pushState และ replaceState และอัปเดตเฉพาะตำแหน่งเลื่อนเมื่อหน้าใหม่ถูกนำทางไปยัง (ปุ่มย้อนกลับ / ไปข้างหน้ารักษาตำแหน่งเลื่อนของพวกเขา):

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

นี่คือวิธีแก้ปัญหาที่รัดกุมสมบูรณ์และค่อนข้างยุติธรรม มันใช้สไตล์ที่เข้ากันได้ minification (และการเข้าถึง angular.module (NAME) เพื่อโมดูลของคุณ)

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

ป.ล. ฉันพบว่าสิ่งที่หมุนอัตโนมัติไม่มีผลไม่ว่าจะตั้งค่าเป็นจริงหรือเท็จ

ใช้ angularjs UI Router สิ่งที่ฉันทำคือ:

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

ด้วย:

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

มันไม่เคยล้มเหลวในหน้าใด ๆ และมันไม่ใช่ทั่วโลก

FYI สำหรับทุกคนที่พบปัญหาที่อธิบายในชื่อ (เหมือนที่ฉันทำ) ซึ่งใช้AngularUI Router เช่นกันปลั๊กอิน ...

ตามที่ถามและตอบในคำถาม SO นี้เราเตอร์ angular-ui จะกระโดดไปที่ด้านล่างของหน้าเมื่อคุณเปลี่ยนเส้นทาง
ไม่สามารถทราบสาเหตุที่หน้าเว็บโหลดที่ด้านล่างใช่หรือไม่ Angular UI-Router autoscroll ฉบับที่

อย่างไรก็ตามในขณะที่คำตอบระบุไว้คุณสามารถปิดพฤติกรรมนี้โดยพูดautoscroll="false"กับคุณui-viewบน

ตัวอย่างเช่น:

<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

คุณสามารถใช้จาวาสคริปต์นี้

$anchorScroll()

หากคุณใช้ ui-router คุณสามารถใช้ (ทำงานได้)

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

ฉันพบวิธีแก้ปัญหานี้ ถ้าคุณไปที่มุมมองใหม่ฟังก์ชันจะถูกดำเนินการ

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

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

การตั้งค่า autoScroll เป็น True นั้นไม่ใช่เคล็ดลับสำหรับฉันดังนั้นฉันจึงเลือกโซลูชันอื่น ฉันสร้างบริการที่ขอทุกครั้งที่มีการเปลี่ยนเส้นทางและใช้บริการ $ anchorScroll ในตัวเพื่อเลื่อนไปด้านบน ได้ผลสำหรับฉัน :-)

บริการ:

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

การลงทะเบียน:

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

สายไปงานเลี้ยงเล็ก ๆ น้อย ๆ แต่ฉันได้ลองทุกวิธีที่เป็นไปได้และไม่มีอะไรทำงานได้อย่างถูกต้อง นี่คือทางออกที่สง่างามของฉัน:

ฉันใช้ตัวควบคุมที่ควบคุมหน้าของฉันทั้งหมดด้วย ui-router ช่วยให้ฉันสามารถเปลี่ยนเส้นทางผู้ใช้ที่ไม่ผ่านการตรวจสอบหรือรับรองความถูกต้องไปยังตำแหน่งที่เหมาะสม คนส่วนใหญ่ใส่มิดเดิลแวร์ของพวกเขาในการตั้งค่าแอพของพวกเขา แต่ฉันต้องการคำขอ http บางส่วนดังนั้นตัวควบคุมทั่วโลกทำงานได้ดีขึ้นสำหรับฉัน

index.html ของฉันดูเหมือนว่า:

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

initCtrl.js ของฉันดูเหมือนว่า:

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

ฉันได้ลองทุกทางเลือกที่เป็นไปได้วิธีนี้ได้ผลดีที่สุด

คำตอบทั้งหมดข้างต้นแบ่งพฤติกรรมของเบราว์เซอร์ที่คาดไว้ สิ่งที่คนส่วนใหญ่ต้องการคือสิ่งที่จะเลื่อนไปด้านบนหากเป็นหน้า "ใหม่" แต่กลับไปที่ตำแหน่งก่อนหน้าถ้าคุณไปถึงที่นั่นผ่านปุ่มย้อนกลับ (หรือไปข้างหน้า)

หากคุณถือว่าโหมด HTML5 สิ่งนี้กลายเป็นเรื่องง่าย (แม้ว่าฉันจะแน่ใจว่ามีคนที่สดใสบางคนสามารถรู้วิธีทำให้สิ่งนี้สวยงามยิ่งขึ้น!):

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

วิธีการทำงานคือเราเตอร์สันนิษฐานว่ามันจะเลื่อนไปด้านบน แต่ล่าช้าเล็กน้อยเพื่อให้เบราว์เซอร์มีโอกาสที่จะเสร็จสิ้น หากเบราว์เซอร์แจ้งให้เราทราบว่าการเปลี่ยนแปลงนั้นเกิดจากการนำทางย้อนกลับ / ไปข้างหน้ามันจะยกเลิกการหมดเวลาและการเลื่อนจะไม่เกิดขึ้น

ฉันใช้documentคำสั่งraw เพื่อเลื่อนดูเพราะฉันต้องการเลื่อนไปที่ด้านบนสุดของหน้าต่าง หากคุณเพียงต้องการui-viewเลื่อนจากนั้นตั้งค่าautoscroll="my_var"ตำแหน่งที่คุณควบคุมmy_varโดยใช้เทคนิคด้านบน แต่ฉันคิดว่าคนส่วนใหญ่จะต้องการเลื่อนหน้าทั้งหมดหากคุณไปที่หน้าเป็น "ใหม่"

การใช้งานดังกล่าวข้างต้น UI เตอร์แม้ว่าคุณสามารถใช้ ng เส้นทางแทนโดยการแลกเปลี่ยนสำหรับ$routeChangeSuccess$stateChangeSuccess

ไม่มีคำตอบใดที่แก้ไขปัญหาของฉันได้ ฉันกำลังใช้ภาพเคลื่อนไหวระหว่างมุมมองกับการเลื่อนจะเกิดขึ้นหลังจากภาพเคลื่อนไหวเสมอ วิธีแก้ปัญหาที่ฉันพบเพื่อให้การเลื่อนไปด้านบนเกิดขึ้นก่อนที่ภาพเคลื่อนไหวจะเป็นคำสั่งต่อไปนี้:

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

            })
        }
    };
}]);

ฉันแทรกมันลงในมุมมองของฉันดังนี้:

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

Simple Solution เพิ่มscrollPositionRestorationในโมดูลเส้นทางหลักที่เปิดใช้งาน
แบบนี้:

const routes: Routes = [

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

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

ลองใช้http://ionicframework.com/docs/api/service/ $ ionicScrollDelegate /

มันจะเลื่อนไปที่ด้านบนของรายการ scrollTop ()

ในที่สุดฉันก็ได้รับสิ่งที่ฉันต้องการ

ฉันต้องการเลื่อนไปด้านบน แต่ไม่ต้องการการเปลี่ยนบางอย่าง

คุณสามารถควบคุมสิ่งนี้ได้ในระดับเส้นทางตามเส้นทาง
ฉันกำลังรวมโซลูชันข้างต้นโดย @wkonkel และเพิ่มวิธีการง่ายๆnoScroll: trueพารามิเตอร์ให้กับการประกาศเส้นทาง ถ้าอย่างนั้นฉันก็กำลังจะเปลี่ยนไป

ทั้งหมด: ทั้งหมดนี้ลอยไปด้านบนของหน้าในช่วงการเปลี่ยนภาพใหม่ซึ่งจะไม่ลอยไปด้านบนบนForward/ Backช่วงการเปลี่ยนภาพและจะช่วยให้คุณสามารถแทนที่ลักษณะการทำงานนี้หากจำเป็น

รหัส: (โซลูชันก่อนหน้ารวมทั้งตัวเลือก 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');

ใส่ลงในapp.runบล็อกของคุณและฉีด$state...myApp.run(function($state){...})

จากนั้นหากคุณไม่ต้องการเลื่อนไปที่ด้านบนของหน้าให้สร้างเส้นทางดังนี้:

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

สิ่งนี้ได้ผลสำหรับฉันรวมถึงการควบคุมอัตโนมัติ

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