I'm using the following directive https://github.com/d-oliveros/ngSmoothScroll to make stuff in this project smoothly scroll to the selected element.
Here's 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>
...
That's where the script is included (~/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' being the actual dependency inclusion to the project. Following the instructions inside the link given at the beginning of this post this is what I do inside 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 scroll happening and also, there are no warnings/errors given by either the console or jslint on my grunt serve task.
Any idea what I might be doing wrong? I'm VERY new to angular and I'm still trying to find my way through it.
I'm not sure but it may be because you are using the container-id on a link and not a non-anchor tag. I'm using this to scroll to an element in my 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 minified version wasn't working for me so my scripts go as follows:
<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'
])
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments