[javascript] 새 페이지에서 경로를 변경해도 맨 위로 스크롤되지 않습니다

JAVASCRIPT / 글쓴이

나는 경로가 바뀔 때 적어도 나에게 바람직하지 않은 행동을 발견했습니다. 자습서 http://angular.github.io/angular-phonecat/step-11/app/#/phones의 11 단계
에서 전화 목록을 볼 수 있습니다. 맨 아래로 스크롤하여 최신 중 하나를 클릭하면 스크롤이 맨 위에 있지 않고 대신 중간에 있음을 알 수 있습니다.

내 응용 프로그램 중 하나에서도 이것을 발견했으며 어떻게 이것을 맨 위로 스크롤 할 수 있는지 궁금했습니다. 나는 그것을 수동으로 할 수 있지만, 나는 모르는 다른 우아한 방법이 있어야한다고 생각합니다.

경로가 바뀔 때 맨 위로 스크롤하는 우아한 방법이 있습니까?

답변

문제는 ngView 가 새보기를로드 할 때 스크롤 위치를 유지 한다는 것 입니다. $anchorScroll“보기가 업데이트 된 후 뷰포트를 스크롤” 하도록 지시 할 수 있습니다 ( 문서 는 약간 모호하지만 여기서 스크롤 하면 새보기 의 맨 위로 스크롤하는 것을 의미 합니다).

해결책 은 autoscroll="true"ngView 요소 에 추가 하는 것입니다.

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

답변

이 코드를 실행하십시오.

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

    window.scrollTo(0, 0);

});

답변

이 코드는 저에게 효과적이었습니다. .. 저에게도 효과가 있기를 바랍니다. .. 실행 블록에 $ anchorScroll을 주입하고 아래 예제에서했던 것처럼 리스너 함수를 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', ...)예상대로, 그리고 많은 다른 사람을, 나는 스크롤 – 투 – 톱에 새로운 페이지 작업을 가져올 수 없습니다.

이것이 궁극적으로 저에게 효과적이었습니다. 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');
})

답변

여기에 (견고하게) 강력하고 완전하며 (공정하게) 간결한 솔루션이 있습니다. 축소 호환 스타일과 모듈에 대한 angular.module (NAME) 액세스를 사용합니다.

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

추신 : 나는 자동 스크롤이 true 또는 false로 설정되었는지 여부에 영향을 미치지 않는다는 것을 알았습니다.

답변

angularjs UI 라우터를 사용하여 내가하고있는 일은 다음과 같습니다.

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

와:

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

어떤 페이지에서도 실패하지 않으며 전역이 아닙니다.

답변

참고로 AngularUI Router 플러그인을 사용하는 제목에 설명 된 문제를 겪는 사람에게도 참고하십시오 …

이 SO 질문에서 묻고 대답 한 것처럼 angular-ui 라우터는 경로를 변경할 때 페이지의 맨 아래로 이동합니다.
페이지가 왜 맨 아래에로드되는지 알 수 없습니까? 각도 UI 라우터 자동 스크롤 문제

그러나 답변에 나와있는 것처럼에 말하여이 동작을 해제 할 수 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