Angular scroll not working when the content is within a container

Question

I'm using Angular plugin called duScroll (https://github.com/oblador/angular-scroll/) for scrolling when a href is clicked. All the sections are within a container with height of 500px called 'scroll-container'. But the scroll is not happening.

I was able to get it to atleast scroll by changing a line in duScroll.js

proto.scrollToElement = function() {...
...
  return angular.element(document.querySelector('.scroll-container')).scrollTo(0, top-45, duration, easing);
}  

But still the scroll is inconsistent and does not work properly. Where am I going wrong ?

Plnkr : http://plnkr.co/edit/UVh4cjCdMuD9kBMgTgJB?p=preview

Answer 1

You'd be better off using the directives du-smooth-scroll and du-scroll-container outlined in the documentation.

In your case something like this would work:

<nav du-scroll-container="scroll-container">
  <ul>
    <li><a du-smooth-scroll href="#section-1" >Section 1</a></li>
    …
  </ul>
</nav>
<div id="scroll-container" class="scroll-container">
  …
</div>