I'm using UI-router in my app and I'd like to so a simple "scrollTo" to an anchor when the URL/state changes. I don't want to load the next step from a template, or load a new controller. I'd just like several divs to be on the page already and scroll up and down between them. A simplified view of the HTML would be this.

    <div id="step1">
        <button ng-click="moveToStep2()">Continue</button>
    </div>
    <div id="step2">
        <button ng-click="moveToStep3()">Continue</button>
    </div>
    <div id="step3">
        Step 3 content
    </div>

So, when you enter the page the URL would be domain/booking

When you click the first button I'd like my controller code to change the URL to domain/#/step-2 and scroll down to the "step2" div.

Ideally, when the user hits the back button it would revert to the first URL and scroll back up to step 1.

Anybody know how to do this?

I'm using UI-router in my app and I'd like to so a simple "scrollTo" to an anchor when the URL/state changes. I don't want to load the next step from a template, or load a new controller. I'd just like several divs to be on the page already and scroll up and down between them. A simplified view of the HTML would be this.

    <div id="step1">
        <button ng-click="moveToStep2()">Continue</button>
    </div>
    <div id="step2">
        <button ng-click="moveToStep3()">Continue</button>
    </div>
    <div id="step3">
        Step 3 content
    </div>

So, when you enter the page the URL would be domain.com/booking

When you click the first button I'd like my controller code to change the URL to domain.com/#/step-2 and scroll down to the "step2" div.

Ideally, when the user hits the back button it would revert to the first URL and scroll back up to step 1.

Anybody know how to do this?

• javascript
• angularjs
• angular-ui-router

Share Improve this question Follow edited Jun 15, 2018 at 15:08 georgeawg 48.9k1313 gold badges7676 silver badges9898 bronze badges asked Aug 4, 2014 at 14:17 jonhobbsjonhobbs 28k3737 gold badges118118 silver badges177177 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 13 +50

First. You need to define the state.

.state('step1', {
    url: '/step-1'
})

---

Add onEnter controller (so you can $inject things).

.state('step1', {
    url: '/step-1',
    onEnter: function () {}
})

---

Animate (or simply scroll) to element

$('html, body').animate({
    scrollTop: $("#step1").offset().top
}, 2000);

---

Here the example

Using

• $anchorScroll
• and ui-router's onenter callback

You can do something like this:

$stateProvider.state("step1", {
  template: 'template.html',
  controller: ...,
  onEnter: function(){
      $location.hash('step1');
      $anchorScroll();
  }
});
...

You can listen to $locationChangeSuccess, e.g.

$rootScope.$on('$locationChangeSuccess', scrollBasedOnLocationChangeEvent);

Basic example: http://angular-ui.github.io/ui-router/site/#/api/ui.router.router.$urlRouter

If the divs are already on the current page, just hard code the href to teh current

<div id="step1">
<a href="wizard.html#/wizard/start#step1">Continue to step 1</a>
</div>
<div id="step2">
<a href="wizard.html#/wizard/start#step2">Continue step 2</a>
</div>
<div id="step3">
    Step 3 content
</div>

<a name="#step2">STEP 2</a>

<a name="#step1">STEP 1</a>