我在我的应用程序中使用UI路由器,当URL /状态发生变化时,我想对锚点进行简单的“scrollTo”.我不想从模板加载下一步,或加载新的控制器.我只想在页面上有几个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>
因此,当您进入页面时,URL将是domain.com/booking
当您单击第一个按钮时,我希望我的控制器代码将URL更改为domain.com/#/step-2并向下滚动到“step2”div.
理想情况下,当用户点击后退按钮时,它将恢复到第一个URL并向上滚动回到第1步.
有人知道怎么做吗？
解决方法
第一.您需要定义状态.
.state('step1',{
url: '/step-1'
})
添加onEnter控制器(所以你可以$注入东西).
.state('step1',{
url: '/step-1',onEnter: function () {}
})
动画(或简单地滚动)到元素
$('html,body').animate({
scrollTop: $("#step1").offset().top
},2000);
Here的例子