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

问题描述

我在我的应用程序中使用了 UI-router，当 URL/状态改变时，我想简单地scrollTo"到一个锚点.我不想从模板加载下一步，或者加载一个新的控制器.我只是希望页面上已经有几个 div 并在它们之间上下滚动.HTML 的简化视图是这样的.

 
<button ng-click="moveToStep2()">继续</button>
<div id="step2"><button ng-click="moveToStep3()">继续</button>

<div id="step3">第三步内容

因此，当您进入页面时，URL 将是 domain.com/booking

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

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

有人知道怎么做吗?

解决方案

首先.您需要定义状态.

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

<小时>

添加 onEnter 控制器(这样你就可以$inject 东西).

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

<小时>

动画(或简单地滚动)到元素

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

<小时>

这里例子

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?

解决方案

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

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