AngularJS의 ScrollTo 함수

AngularJS의 ScrollTo 함수

---

빠른 탐색이 올바르게 작동하도록 노력하고 있습니다. 측면에 떠 있습니다. 링크를 클릭하면 페이지의 해당 ID로 이동합니다. 저는 Treehouse 의이 가이드를 따르고 있습니다. 이것은 스크롤링에 대한 것입니다.

$("#quickNav a").click(function(){
    var quickNavId = $(this).attr("href");
    $("html, body").animate({scrollTop: $(location).offset().top}, "slow");
    return false;
});

처음에는 </body>. 그러나 나는 quickNav가 컴파일되기 전에 발생하는 경쟁 조건에 처한 것 같습니다 (그 ng-hide원인이 있는지 확실하지 않지만 DOM 내에 있음).

콘솔에서 해당 코드 블록을 실행하면 스크롤이 예상대로 작동합니다.

나는 이것을 컨트롤러로 옮기는 것이 더 효과적 일 것이라고 생각했습니다. 그러나 나는 그것을 성취 할 운이 없다. 이 코드 블록을 AngularJS와 함께 사용하려면 어떻게해야합니까?

---

다음은 클릭시 요소로 스크롤되는 간단한 지시문입니다.

myApp.directive('scrollOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, $elm) {
      $elm.on('click', function() {
        $("body").animate({scrollTop: $elm.offset().top}, "slow");
      });
    }
  }
});

데모 : http://plnkr.co/edit/yz1EHB8ad3C59N6PzdCD?p=preview

지침을 만드는 데 도움이 필요하면 http://egghead.io 에서 # 10 "첫 번째 지침"부터 시작 하는 비디오를 확인하십시오 .

edit : href로 지정된 특정 요소로 스크롤하려면 attrs.href.

myApp.directive('scrollOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, $elm, attrs) {
      var idToScroll = attrs.href;
      $elm.on('click', function() {
        var $target;
        if (idToScroll) {
          $target = $(idToScroll);
        } else {
          $target = $elm;
        }
        $("body").animate({scrollTop: $target.offset().top}, "slow");
      });
    }
  }
});

그런 다음 다음과 같이 사용할 수 있습니다 <div scroll-on-click></div>. 클릭 한 요소로 스크롤합니다. 또는 <a scroll-on-click href="#element-id"></div>ID가있는 요소로 스크롤합니다.

---

사용하려는 경우 더 나은 지시문입니다.

페이지의 모든 요소로 스크롤 할 수 있습니다.

.directive('scrollToItem', function() {                                                      
    return {                                                                                 
        restrict: 'A',                                                                       
        scope: {                                                                             
            scrollTo: "@"                                                                    
        },                                                                                   
        link: function(scope, $elm,attr) {                                                   

            $elm.on('click', function() {                                                    
                $('html,body').animate({scrollTop: $(scope.scrollTo).offset().top }, "slow");
            });                                                                              
        }                                                                                    
    }})     

사용법 (예를 들어 div 'back-to-top'을 클릭하면 id 스크롤 상단으로 스크롤됩니다) :

<a id="top-scroll" name="top"></a>
<div class="back-to-top" scroll-to-item scroll-to="#top-scroll"> 

또한 html, body 요소의 chrome, firefox, safari 및 IE 원인에서도 지원됩니다.

---

스크롤 컨테이너 내의 특정 요소에 애니메이션을 적용하기 위해 (고정 DIV)

/*
    @param Container(DIV) that needs to be scrolled, ID or Div of the anchor element that should be scrolled to
    Scrolls to a specific element in the div container
*/
this.scrollTo = function(container, anchor) {
    var element = angular.element(anchor);
    angular.element(container).animate({scrollTop: element.offset().top}, "slow");
}

---

$ anchorScroll http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html을 사용하는 각도 솔루션 :

app.controller('MainCtrl', function($scope, $location, $anchorScroll) {
  var i = 1;

  $scope.items = [{ id: 1, name: 'Item 1' }];

  $scope.addItem = function (){
    i++;
    //add the item.
    $scope.items.push({ id: i, name: 'Item ' + i});
    //now scroll to it.
    $location.hash('item' + i);
    $anchorScroll();
  };
});

그리고 여기에 plunk가 있습니다. http://plnkr.co/edit/xi2r8wP6ZhQpmJrBj1jM?p=preview

순수한 자바 스크립트 솔루션을 원하는 경우 다음 중 하나가 있습니다.

부모 컨테이너 ID 및 대상 스크롤 ID를 사용하여 코드에서 runScroll을 호출합니다.

function runScroll(parentDivId,targetID) {
    var longdiv;
    longdiv = document.querySelector("#" + parentDivId);
    var div3pos = document.getElementById(targetID).offsetTop;
    scrollTo(longdiv, div3pos, 600);
}


function scrollTo(element, to, duration) {
    if (duration < 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

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

참조 : 크로스 브라우저 JavaScript (jQuery 아님 ...) 스크롤 맨 위로 애니메이션

---

예를 들어 Andy에게 감사합니다. 이것은 매우 도움이되었습니다. 단일 페이지 스크롤을 개발 중이고 해시 뱅 URL을 사용할 때 Angular가 새로 고쳐지는 것을 원하지 않았기 때문에 약간 다른 전략 구현을 종료했습니다. 또한 브라우저의 뒤로 / 앞으로 작업을 보존하고 싶습니다.

지시문과 해시를 사용하는 대신 $ location.search에서 $ scope. $ watch를 사용하고 거기에서 대상을 얻습니다. 이것은 깔끔한 앵커 태그를 제공합니다.

<a ng-href="#/?scroll=myElement">My element</a>

다음과 같이 app.js의 모듈 선언에 시계 코드를 연결했습니다.

.run(function($location, $rootScope) {
   $rootScope.$watch(function() { return $location.search() }, function(search) { 
     var scrollPos = 0;
     if (search.hasOwnProperty('scroll')) {
       var $target = $('#' + search.scroll);
       scrollPos = $target.offset().top;
     }   
     $("body,html").animate({scrollTop: scrollPos}, "slow");
   });
})

위 코드의주의 사항은 다른 경로에서 URL로 직접 액세스하는 경우 jQuery의 $ target.offset () 호출에 대해 DOM이 제 시간에로드되지 않을 수 있다는 것입니다. 해결책은이 코드를 $ viewContentLoaded 감시자 내에 중첩하는 것입니다. 최종 코드는 다음과 같습니다.

.run(function($location, $rootScope) {
  $rootScope.$on('$viewContentLoaded', function() {
     $rootScope.$watch(function() { return $location.search() }, function(search) {
       var scrollPos = 0 
       if (search.hasOwnProperty('scroll')) {
         var $target = $('#' + search.scroll);
         var scrollPos = $target.offset().top;
       }
       $("body,html").animate({scrollTop: scrollPos}, "slow");                                                                                                                                                                    
     });  
   });    
 })

Chrome 및 FF로 테스트

---

I used andrew joslin's answer, which works great but triggered an angular route change, which created a jumpy looking scroll for me. If you want to avoid triggering a route change,

myApp.directive('scrollOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, $elm, attrs) {
      var idToScroll = attrs.href;
      $elm.on('click', function(event) {
        event.preventDefault();
        var $target;
        if (idToScroll) {
          $target = $(idToScroll);
        } else {
          $target = $elm;
        }
        $("body").animate({scrollTop: $target.offset().top}, "slow");
        return false;
      });
    }
  }
});

---

What about angular-scroll, it's actively maintained and there is no dependency to jQuery..

---

Another suggestion. One directive with selector.

HTML:

<button type="button" scroll-to="#catalogSection">Scroll To</button>

Angular:

app.directive('scrollTo', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('click', function () {

                var target = $(attrs.scrollTo);
                if (target.length > 0) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    });
                }
            });
        }
    }
});

Also notice $anchorScroll

---

very clear answer, using just ANGULARJS, no any JQUERY depends

in your html somewhere on the bottom <back-top>some text</back-top>

in your html somewhere on the top <div id="top"></div>

in your js:

/**
 * @ngdoc directive
 * @name APP.directive:backTop
 <pre>
<back-top></back-top>
 </pre>
 */


angular
.module('APP')
.directive('backTop', ['$location', '$anchorScroll' ,function($location, $anchorScroll) {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    template: '<span class=\'btn btn-mute pull-right\'><i class=\'glyphicon glyphicon-chevron-up\'></i><ng-transclude></ng-transclude></span>',
    scope: {
    },
    link: function(scope, element) {
      element.on('click', function(event) {
        $anchorScroll(['top']);
      });
    }
  };
}]);

참고URL : https://stackoverflow.com/questions/17284005/scrollto-function-in-angularjs