ui-router 및 Angularjs를 사용하여 TOP으로 자동 스크롤
나는 이것에 대해 너무 많은 다른 문제를 읽었으며 주어진 솔루션 중 어느 것도 내 사용 사례에 맞지 않는 것 같습니다. 모든 링크에 target = "_ top"을 추가하는 것으로 시작했지만 실제로는 앱이 다시로드되어 작동하지 않습니다. 나는 또한 사람들이 autoscroll = "true" 를 사용한다고 말하는 것을 보았지만 그것은 내 ui-view 내에서만 작동하는 것 같습니다 .
이것의 문제는 내 index.html 파일에서 첫 번째 ui-view 위에있는 nav 및 기타 정적 요소를 수정했다는 것입니다. 즉, 다른 페이지로 이동할 때 페이지가 해당 요소를 지나서로드 될 때 탐색을 잃게됩니다. 나는 또한 이것을 몸에 두려고 시도했습니다.
<body autoscroll="true">
</body>
이것도 아무것도하지 않는 것 같습니다. 따라서 질문은 새 페이지 (ui-router의 새 경로 변경)가 페이지 상단에서 시작되도록하려면 어떻게해야합니까? 감사!
항상 0 크로스 브라우저로 스크롤하려면 자동 스크롤을 사용하지 마십시오. 실행 블록을 배치하십시오.
$rootScope.$on('$stateChangeSuccess', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
});
버전 1.0.6을 사용하여 의 $stateChangeSuccess이벤트가 찬성되지 않습니다 $transitions서비스를 제공합니다. 다음은 모든 상태 변경시 맨 위로 스크롤하는 데 사용한 코드입니다.
app.run(['$transitions', function ($transitions) {
$transitions.onSuccess({}, function () {
document.body.scrollTop = document.documentElement.scrollTop = 0;
})
}]);
나는 똑같은 문제가 있었고 경로 변경시 navbar가 수정되었고 페이지 로딩이 부분적으로 페이지 아래로 스크롤되었습니다.
다음 과 같이에 방금 추가 autoscroll="false"했습니다 ui-view.
<div ui-view="main" autoscroll="false"></div>
편집하다
이 방법을 약간 더러운 해킹으로 테스트했지만 작동합니다. 각도 서비스 $anchorScroll및 $locationui-router .state구성을 위해 관련 컨트롤러로 가져 옵니다 . 그런 다음 $watchon ui-router $stateParams를 사용하여 $location.hash('top');경로 / 상태 변경 을 호출 합니다.
https://docs.angularjs.org/api/ng/service/ $ anchorScroll
https://docs.angularjs.org/api/ng/service/ $ location # hash
.controller('myCtrl', function ($location, $anchorScroll, $scope, $stateParams) {
$scope.$watchCollection('$stateParams', function() {
$location.hash('top');
$anchorScroll();
});
});
이를위한 Angular 서비스가 있습니다. https://docs.angularjs.org/api/ng/service/$anchorScroll
샘플 코드 :
.run(function ($rootScope, $state, $stateParams, $anchorScroll) {
$rootScope.$on('$stateChangeStart', function () {
$anchorScroll();
});
});
특정 요소로 스크롤하려는 경우
.run(function ($rootScope, $state, $stateParams, $anchorScroll) {
$rootScope.$on('$stateChangeStart', function () {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
});
});
ui-router를 사용하고 있습니다. 내 실행은 다음과 같습니다.
.run(function($rootScope, $state, $stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$on('$stateChangeSuccess', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
});
})
나는 다른 두 가지 대답을 조합해야만했다.
<div ui-view autoscroll="false"></div>
와 함께
$rootScope.$on('$stateChangeSuccess', function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
참고 : 이것은 ui-router의 v0.2.15에 있습니다.
Did the same thing as the excepted answer from @TaylorMac but in $locationChangeStart.
index.run.js:
$rootScope.$on('$locationChangeStart', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
});참고URL : https://stackoverflow.com/questions/26444418/autoscroll-to-top-with-ui-router-and-angularjs
'programing' 카테고리의 다른 글
| PHP> = 5.3 엄격 모드에서 오류를 생성하지 않고 객체에 속성을 추가하는 방법 (0) | 2020.11.16 |
|---|---|
| "IEnumerable의 가능한 다중 열거"를 설명하는 Resharper의 예제 코드 (0) | 2020.11.16 |
| Python 생성기에서 한 요소 (peek)를 미리 보는 방법은 무엇입니까? (0) | 2020.11.16 |
| 즉시 다시 발생하지 않으면 예외 추적이 숨겨집니다. (0) | 2020.11.16 |
| jquery AJAX 성공 콜백에서 함수에 변수 전달 (0) | 2020.11.16 |