[AngularJS] scrollTo 페이지 내에서 스크롤 이동 디렉티브

개요

클릭시 페이지 내에서 스크롤 이동하는 scrollTo 디렉티브 구현!

코드 내용

JS 구문, AngularJS의 디렉티브 내용과 HTML 에서 이를 속성으로 적용하는 방법

JS

angular.module('app', [])
  .directive('scrollTo', function ($location, $anchorScroll) {
    return function(scope, element, attrs) {
    element.bind('click', function(event) {
   event.stopPropagation();
   scope.$on('$locationChangeStart', function(ev) {
     ev.preventDefault();
   });
   var location = attrs.scrollTo;
   $location.hash(location);
   $anchorScroll();
  });
 };
  });

HTML 적용

    <ul>
      <li><a href="" id="top" scroll-to="section1">Section 1</a></li>
      <li><a href="" scroll-to="section2">Section 2</a></li>
      <li><a href="" scroll-to="section3">Section 3</a></li>
      <li><a href="" scroll-to="section4">Section 4</a></li>
    </ul>

~

    <a href="" scroll-to="top" class="back">Back to top</a>
    <h1 id="section1">Hi, I'm a help screen.</h1>

~

    <a href="" scroll-to="top" class="back">Back to top</a>
    <h1 id="section2">Hi, I'm a help screen.</h1>

~

    <a href="" scroll-to="top" class="back">Back to top</a>
    <h1 id="section3">Hi, I'm a help screen.</h1>

~

    <a href="" scroll-to="top" class="back">Back to top</a>
    <h1 id="section4">Hi, I'm a help screen.</h1>

• 출처: http://plnkr.co/edit/Sl2V4u3tVzsqEj7ttgNi?p=preview

추가 논의 할 점

스크롤 이동시 부드럽게 움직이는 것은 어떻게 연출할까?

• 관련 글: https://stackoverflow.com/questions/21749878/angularjs-anchorscroll-smooth-duration