I am experiencing a conflict between my ng-route and the animated scroll feature on my website:
Below is the code for my scroll element:
<a href="#one" class="goto-next scrolly">Next</a>
In this code, "#one" represents the section ID to scroll to, goto-next is a class for an image, and scrolly is for smooth scroll animation.
Here is my ngRoute configuration:
angular.module('starter', ['ionic','ngRoute'])
.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/home', {
templateUrl : 'templates/home.html',
controller : 'mainController'
})
// route for the about page
.when('/whatwedo', {
templateUrl : 'templates/whatwedo.html',
controller : 'mainController'
})
// route for the contact page
.when('/tryus', {
templateUrl : 'templates/tryus.html',
controller : 'mainController'
})
.when('/pricing', {
templateUrl : 'templates/pricing.html',
controller : 'mainController'
})
.when('/videos', {
templateUrl : 'templates/videos.html',
controller : 'mainController'
})
.otherwise({
redirectTo: '/home'
});
})
Clicking on the scroll element redirects me to the default webpage instead of smoothly scrolling. I have tried using ui.router instead of ngRoute but the scroll animation still does not work. Any help would be appreciated!
UPDATE: I attempted using ui.router as an alternative to ngRoute, however, the issue with the scroll animation persist. Auto-scroll on button click is not functioning as expected.