javascript – AngularJS ui-router,滚动到状态更改的下一步

前端之家收集整理的这篇文章主要介绍了javascript – AngularJS ui-router,滚动到状态更改的下一步前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在我的应用程序中使用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的例子

原文链接:https://www.f2er.com/js/155812.html

猜你在找的JavaScript相关文章