角UI路由器，滚动到状态改变下一步 [英] Angular ui-router, scroll to next step on state change

问题描述

我使用的UI路由器在我的应用程序，我想这么一个简单的scrollTo，以锚当URL /状态的变化。我不想从模板加载下一步骤，或装入一个新的控制器。我只是想几个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>

所以，当你进入页面的URL会 domain.com/booking

当你点击第一个按钮，我想我的控制器code将URL更改为 domain.com /＃/第2步并向下滚动到步骤2分区。

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.

有人知道如何做到这一点？

Anybody know how to do this?

推荐答案

第一。您需要定义的状态。

First. You need to define the state.

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

---

添加的OnEnter 控制器（这样你就可以 $注的东西）。

---

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

---

这里的例子

这篇关于角UI路由器，滚动到状态改变下一步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！