Nadeem Khedr

AngularJs Scroll to element using directives

January 03, 2014

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
          }
        });
      });
    }
  };
});

Nadeem Khedr

Written by Nadeem Khedr citizen of the world, you can find me on Twitter & Github