Question

我在我的应用中使用了UI路由器，我想要这样一个简单的＆＃34; scrollTo＆＃34; URL /状态更改时的锚点。我不想从模板加载下一步，或加载新控制器。我只想在页面上有几个div，并在它们之间向上和向下滚动。 HTML的简化视图就是这样。

    <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>

因此，当您进入该页面时，该网址将为 domain.com/booking

当您点击第一个按钮时，我希望我的控制器代码将网址更改为 domain.com /＃/ step-2 ，然后向下滚动到＆＃34; step2＆＃ 34;格。

理想情况下，当用户点击后退按钮时，它会恢复到第一个网址并向上滚动回到第1步。

有人知道怎么做吗？

Answer 1

首先。你需要定义状态。

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

添加onEnter控制器（这样你就可以$inject件事。）

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

动画（或简单滚动）到元素

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

Here示例

Answer 2

使用

$anchorScroll
和ui-router＆＃39; onenter回拨

您可以这样做：

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

Answer 3

您可以收听$locationChangeSuccess，例如

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

基本示例：http://angular-ui.github.io/ui-router/site/#/api/ui.router.router。$ urlRouter

Answer 4

如果div已经在当前页面上，只需将href硬编码为当前页面

<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>

AngularJS ui-router，滚动到状态更改的下一步

4 个答案: