使用 ui-router 和 Angularjs 自动滚动到顶部

Autoscroll to TOP with ui-router and Angularjs(使用 ui-router 和 Angularjs 自动滚动到顶部)
本文介绍了使用 ui-router 和 Angularjs 自动滚动到顶部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

I've read so many different problems with this and none of the solution given seem to fit my use case. I started by simply putting target="_top" on all my links, but that actually forces my app to reload which wont work. I've also seen people say they use autoscroll="true" but that only seems to work if its within my ui-view.

The issue with this is that in my index.html file I have fixed nav and other static elements that are above my first ui-view. This means when I go to other pages I lose the navigation as the page loads past those elements. I've also tried putting this on the body with:

<body autoscroll="true">
</body>

This doesn't seem to do anything either. So the question is, how can I make sure that new pages (new route changes from ui-router) result in starting at the top of the page? THANKS!

解决方案

If you want it to always scroll to 0 cross-browser, do nothing with autoscroll. Just place this your run block:

$rootScope.$on('$stateChangeSuccess', function() {
   document.body.scrollTop = document.documentElement.scrollTop = 0;
});

这篇关于使用 ui-router 和 Angularjs 自动滚动到顶部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

How to sort a array of object based on two properties and check the rage is sequential?(如何根据两个属性对对象数组进行排序,并检查范围是否连续?)
Untyped function calls may not accept type arguments - Angular 5 http calls(非类型化函数调用可能不接受类型参数-角度5 http调用)
ReferenceError: Excel is not defined(ReferenceError:未定义Excel)
How to save two canvas(outer and inner) as png using fabric js in angular(如何保存两个画布(外部和内部)为PNG使用织物js的角度)
Access to #39;Set-Cookies#39; header in $http(访问$http中的Set-Cookies标头)
Adding lt;stronggt;/bold text in translated string using angular-translate(使用角度翻译在翻译后的字符串中添加lt;stronggt;/粗体文本)