AngularJS ui-router，滚动到状态更改的下一步 [英] AngularJS ui-router, scroll to next step on state change

问题描述

我在我的应用程序中使用UI路由器，当URL /状态发生变化时，我想对锚点进行简单的scrollTo。我不想从模板加载下一步，或加载新的控制器。我只想在页面上有几个div，并在它们之间上下滚动。 HTML的简化视图就是这样。

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>

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

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

当您点击第一个按钮时，我希望我的控制器代码将URL更改为 domain.com /＃/ step-2 并向下滚动到step2div。

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.

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

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

有人知道怎么做吗？

推荐答案

首先。你需要定义状态。

First. You need to define the state.

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

---

添加 onEnter 控制器（所以你可以 $ inject 东西）。

---

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

---

这里示例

这篇关于AngularJS ui-router，滚动到状态更改的下一步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！