NgSmoothScroll angular directive not working

Question

I use the following directive https://github.com/d-oliveros/ngSmoothScroll to make the material in this project smoothly scroll to the selected item.

Here is my code:

... <!-- build:js(.) scripts/vendor.js --> <!-- bower:js --> <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script> <script src="bower_components/angular-animate/angular-animate.js"></script> <script src="bower_components/angular-aria/angular-aria.js"></script> <script src="bower_components/angular-cookies/angular-cookies.js"></script> <script src="bower_components/angular-messages/angular-messages.js"></script> <script src="bower_components/angular-resource/angular-resource.js"></script> <script src="bower_components/angular-route/angular-route.js"></script> <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> <script src="bower_components/angular-touch/angular-touch.js"></script> <!-- endbower --> <!-- endbuild --> <script src="bower_components/ngSmoothScroll/dist/angular-smooth-scroll.min.js"></script> <!-- build:js({.tmp,app}) scripts/scripts.js --> <script src="scripts/app.js"></script> <script src="scripts/controllers/initcontroller.js"></script> <!-- endbuild --> <script src="scripts/libs/materialize.min.js"></script> <script src="scripts/libs/angular-materialize.js"></script> </body> ... 

What if the script is enabled (~/angular-smooth-scroll.min.js) and inside my app.js file I have:

 angular .module('sccateringApp', [ 'ngAnimate', 'ngAria', 'ngCookies', 'ngMessages', 'ngResource', 'ngRoute', 'ngSanitize', 'ngTouch', 'ui.materialize', 'smoothScroll' ]) 

'smoothScroll' is the actual inclusion of dependencies in a project. Following the instructions inside the link at the beginning of this post, this is what I do in my view:

 <li><a href="#" scroll-to="service-info" container-id="service-info">Contáctame</a></li> ... <section class="service-info" id="service-info"> <h1 class="sofia-font">Detalles de Servicio</h1> ... 

However, there is no smooth scrolling, nor are there any warnings / errors set by the console or jslint for my grunt serve task.

Any idea what I can do wrong? I am VERY new to angular and am still trying to find my way through it.

Answer 1

I am not sure, but maybe because you are using the container identifier by reference, not a tag that is not anchored. I use this to scroll an element in the footer. My code is:

 //the anchor link in my nav <a href="#" scroll-to="footer" duration="2500">Click Me</a> ... //the element I want to scroll to <div id="footer"></div> ... 

The mined version did not work for me, so my scripts look like this:

 <script src="/bower_components/angular/angular.js"></script> <script src="/bower_components/angular-animate/angular-animate.js"></script> <script src="/bower_components/angular-aria/angular-aria.js"></script> <script src="/bower_components/angular-messages/angular-messages.js"></script> <script src="/bower_components/angular-material/angular-material.js"></script> <script src="/bower_components/angular-sanitize/angular-sanitize.js"></script> <script src="/bower_components/ngSmoothScroll/lib/angular-smooth-scroll.js"></script> <script src="/js/app.module.js"></script> <script src="/js/app.controller.js"></script> <script src="/js/app.service.js"></script> 

And for the module:

 angular .module('glasser', [ 'ngMaterial', 'ngSanitize', 'smoothScroll' ]) 

Answer 2

That didn't work either, try Angular-Scroll . It has a demo version for testing in a browser.

It also has a spy directive, so you can add classes to elements that are in sight.