AngularJS ui-router, scroll to next step on state change

Question

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?

Umidbek · Accepted Answer · 2014-08-12 11:19:47Z

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

edited Aug 12, 2014 at 11:19

answered Aug 11, 2014 at 15:25

Umidbek

1,50412 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jonhobbs Over a year ago

Can I use this on a page which has no UI-view tag though?

Umidbek Over a year ago

@jonhobbs Yep. From the documentation: The ui-view directive tells $state where to place your templates., so if you don't use templates you don't need it.

Lajos Veres · Accepted Answer · 2014-08-09 22:05:51Z

9

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();
  }
});
...

answered Aug 9, 2014 at 22:05

Lajos Veres

13.7k7 gold badges47 silver badges57 bronze badges

Comments

Riley Lark · Accepted Answer · 2014-08-05 00:22:50Z

1

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

answered Aug 5, 2014 at 0:22

Riley Lark

20.9k15 gold badges86 silver badges130 bronze badges

2 Comments

jonhobbs Over a year ago

OK, so should I just set up some states which all point to the same URL, then listen for the location change and use jqLite animate inside the listener to make this work? I was hoping that UI-router would have some way of doing this so I don't have to put scrolling code in my controller.

Riley Lark Over a year ago

I wouldn't put this code in a controller either - but it looks like onEnter is the correct solution.

user3909593 · Accepted Answer · 2014-08-05 08:55:26Z

0

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>

answered Aug 5, 2014 at 8:55

user3909593

262 bronze badges

1 Comment

jonhobbs Over a year ago

I need to call a function using ng-click first because it has to make a call to my API with the booking details. also, is bypassing UI-router a good idea? I'd rather call the routers .go() method than just use window.location as I want the history to work.

Collectives™ on Stack Overflow

AngularJS ui-router, scroll to next step on state change

4 Answers 4

2 Comments

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related