I want to implement a simple concept using angular, scrolling to a specific area of the page using a directive, I found myself needing this in a pagination example, I want to scroll to the top of the list when the user clicks on next page

Whenever I am trying to implement a directive like that I always try to first write how I would want to represent it in the html.

To checkout a demo go here

I want my html in the end to be something like this

<div class="def" scroll-bookmark>  
  <h1>Default</h1>
</div>  
<div class="bm1" scroll-bookmark="bookmark1">  
  <h1>Bookmark 1</h1>
</div>  
<div class="bm2" scroll-bookmark="bookmark2">  
  <h1>Bookmark 2</h1>
</div>

<div class="btns">  
  <button scroll-to-bookmark>Default bookmark</button>
  <button scroll-to-bookmark="bookmark1">Bookmark 1</button>
  <button scroll-to-bookmark="bookmark2">Bookmark 2</button>
</div>  

So there is two parts that makes this example

scroll-bookmark
Is Where I want to scroll to (I want to register how I would get there)

scroll-to-bookmark
This is the actual directive, I want when I click here to scroll to the corespondent scroll-bookmark with the same value (default one if there is no value)

angular.module('MyApp').directive('scrollToBookmark', function() {  
  return {
    link: function(scope, element, attrs) {
      var value = attrs.scrollToBookmark;
      element.click(function() {
        scope.$apply(function() {
          var selector = "[scroll-bookmark='"+ value +"']";
          var element = $(selector);
          if(element.length) {
            window.scrollTo(0, element[0].offsetTop – 100); 
            // Don’t want the top to be the exact element, -100 will go to the top for a little bit more
          }
        });
      });
    }
  };
});