각도 : jquery animate로 클릭시 위로 스크롤

Question

사용자가 특정 버튼을 클릭하면 페이지 상단으로 부드럽게 스크롤되기를 원합니다. 나는 이것을 위해 jQuery의 .animate을 사용한다. 그러나, 내가 시도한 모든 각도 범위 warns me 나는 범위 밖의 DOM 요소에 액세스 할 수 없습니다.

이것은 내가 뭘하려 :

템플릿 :

<button ng-click="action()"> 

컨트롤러 :이 각도를 제외한 작동

$('html, body').animate({ scrollTop: 0 }, 'slow') 

오류를 제공합니다.

아무도 아이디어를 어떻게 올바른 방법으로 할 수 있습니까?

Answer 1

scope이 작동중인 element의 맨 위로 스크롤하지 않겠습니까? 당신이

<div ng-controller="SomeCtrl"> 
    … 
</div> 

추천하고 컨트롤러에 뭔가가있는 경우 : 컨트롤러에

app.controller('SomeCtrl', ['$scope', '$element', function ($scope, $element) { 
    $($element).animate(…); 
}]); 

Answer 2

을 간단하게 작업하지 스크롤에 대한 정보 만 가지고 계속합니다. 스크롤이 향상 같이 :

<button scrollup ng-click="buttonAction()">Click me</button> 

그리고 마지막으로 당신의 스크롤 물건이에 있어야합니다 : 그것은 추가로 스크롤 동작을 추가하는보기에

$scope.buttonAction = function() { 
    console.log('button action'); 
} 

는 지시어를 정의 이제 정상적으로 버튼을 사용하지만 scrollup 지침 :

app.directive('scrollup', function ($document) { 
     return { 
      restrict: 'A', 
      link: function (scope, elm, attrs) { 
       elm.bind("click", function() { 

        // Maybe abstract this out in an animation service: 
        // Ofcourse you can replace all this with the jQ 
        // syntax you have above if you are using jQ 
        function scrollToTop(element, to, duration) { 
         if (duration < 0) return; 
         var difference = to - element.scrollTop; 
         var perTick = difference/duration * 10; 

         setTimeout(function() { 
          element.scrollTop = element.scrollTop + perTick; 
          scrollToTop(element, to, duration - 10); 
         }, 10); 
        } 

        // then just add dependency and call it 
        scrollToTop($document[0].body, 0, 400); 
       }); 
      } 
     }; 
}); 

지금 당신은 당신의 컨트롤러에 필요한뿐만 아니라 지시문을 추가하여 행동 우포늪 점프가 어떤 작업을 추가 할 수 있습니다.