CODEWITHSUNDEEP
javascriptangularjsangular-materialsmooth-scrolling
Hugh Hou
Hugh Hou

Reputation: 2374

How to do Smooth Scroll in Angular-Material theme?

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!

Upvotes: 3

Views: 3103

Answers (1)

Harris Konstantourakis
Harris Konstantourakis

Reputation: 239

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

Upvotes: 2

Related Questions