AngularJS: How do i scroll to an object with an offset?

Question

I am working on an application built in AngularJS. One requirement that has been passed to me is that when a form is invalid and the user clicks submit, the window should scroll the first invalid element into view.

This is pretty easily accomplished using element.scrollIntoView() but I need to set an offset. You see, the top of the page has a header that 'fades into' the rest of the page. See the image below.

So i'm left to try to figure out some method of offsetting. I have found a bunch of examples but i'm not finding exactly what i'm looking for.

Here is my current code (

var visibleInvalids = angular.element.find('.ng-invalid:visible');
if (angular.isDefined(visibleInvalids)){
    // if we find one, set focus and anchor
    visibleInvalids[0].scrollIntoView(true);

    visibleInvalids[0].focus();
}

Answer 1

Proposed answer to my own question. Inject $anchorScroll and use that, but i'm open to ideas...

  var visibleInvalids = angular.element.find('.ng-invalid:visible');

  if (angular.isDefined(visibleInvalids)){
    // if we find one, set focus and anchor

    // Offset is used to keep items 'below' that fade-in header.
    $anchorScroll.yOffset = 200;
    if (visibleInvalids[0].id) {
      $anchorScroll($location.hash(visibleInvalids[0].id));  
    }

    visibleInvalids[0].focus();
  }