0

I am building a SPA using Angular 1.4 and Grails. In my home page I have 3 sections namely section1, section2 and section3 with the same ID. I have a dropdown menu on the top and I have used the scroll-to plugin to scroll to the respective sections on click. 

<li ><a href scroll-to="section1">History</a></li>

My Problem is that when I move to another route, the dropdown menu will still be at the top and I am not sure how to get this to scroll to that element in the home route from another route. This is what I have tried. 

<li ><a href="#/home/section4">Economic Weight</a></li>

And in the route config I did this

      when('/home/:section', {
        templateUrl: '/euribron/js/app/templates/home.html',
        controller: 'HomeController'
      }).

and in controller I did this

    if($routeParams.section) {      
        var element = document.getElementById($routeParams.section);
        smoothScroll(element);
    }

But this does not work when I am on the same route and it does not seem elegant. Is there an easier way to achieve this in an efficient way.

swordfish
  • 4,899
  • 5
  • 33
  • 61

1 Answers1

0

Instead of scroll-to plugin, you can use $anchorScroll service to manage autoscrolling. Please see this post's answer How to handle anchor hash linking in AngularJS. Basically, you need to set $location.hash() to the section's id that you can get from $routeParams and call $anchorScroll() function to handle the rest. Use different id for the sections.

Community
  • 1
  • 1
Saad
  • 942
  • 6
  • 15