How to do Smooth Scroll in Angular-Material theme?

Question

I am starting a new project and using Angular Material with AngularJS. I am having trouble to make smooth scrolling work. I am using this smooth scroll library: https://github.com/oblador/angular-scroll

I also try this one: https://github.com/d-oliveros/ngSmoothScroll But none of them work. I make a codepen to demo the problem here:

http://codepen.io/hughred22/pen/XmRpOG/

As you see in my Codepen, if I comment out

document.getElementById('bottom').scrollIntoView(true);

To show scrollIntoView work and it scroll to the div. But smooth scroll won't work for some reason. Please help!

Answer 1

You should use the proper container to initiate scrolling. Check a fixed fork of your codepen here http://codepen.io/harconst/pen/qOmPVo

Notice that in my codepen, the container is not the whole document anymore.

var someElement = angular.element(document.getElementById('bottom'));
var container   = angular.element(document.getElementById('container'));    
container.scrollTo(someElement,0,1000);