如何在AngularJS中滚动到页面顶部？

73

我想在使用angularjs收到ajax调用响应后滚动到页面顶部。基本上，我在页面顶部显示警报消息，并且我希望将警报消息集中在接收到的ajax响应上。

谢谢

javascript jquery angularjs

155

您可以使用

$window.scrollTo(x, y);

其中x，横轴是像素，纵轴y是像素。

滚动到顶部
```
$window.scrollTo(0, 0);
```

专注于元素

$window.scrollTo(0, angular.element('put here your element').offsetTop);

Example

更新：

你也可以用 $anchorScroll

Example

— Oleksandr T.
source

6

对于专注于元素，$window.scrollTo(0, angular.element('put here your element').offset().top);

— Muhammad Reda

1

不要忘记在控制器函数定义中注入$ window。例如：函数（$ scope，$ rootScope，$ location，base_factory，$ window）

— Deepak Rai

@MuhammadReda，当您说将您的元素放在这里时，是该元素的ID？例如，我想滚动到ID为“ directions_panel”的元素的顶部，因此我输入了您说“在此处放置元素”的位置，但是却遇到了错误。谢谢您的帮助

— 萨拉（Sarah）

@MuhammadReda我现在正在工作，谢谢。我没有document.getElementById（'my_element'）。offsetTop来代替angular.element（'在这里放元素'）.offsetTop。感谢您的帮助:)

— 萨拉

我不知道为什么，但是这两个代码都不起作用。我在ng-calendar指令中使用它。：（

— rahim.nagori

31

您可以使用$anchorScroll。

只需注入$anchorScroll为依赖项，然后$anchorScroll()在您想滚动到顶部时调用。

— 穆罕默德·雷达（Muhammad Reda）
source

2

请注意，没有可用于的动画（平滑滚动）$anchorScroll。

— isherwood '17

12

理想情况下，我们应根据适用情况从控制器或指令中执行此操作。使用$anchorScroll，$location作为依赖项注入。

然后调用这两个方法

$location.hash('scrollToDivID');
$anchorScroll();

这scrollToDivID是您要滚动的ID。

假设您要导航到错误消息div为

<div id='scrollToDivID'>Your Error Message</div>

有关更多信息，请参阅此文档

— Partha Sarathi Ghosh
source

上面的答案适用于angularjs 1

— Partha Sarathi Ghosh，

3

别忘了，您还可以使用纯JavaScript来处理这种情况，方法是：

window.scrollTo(x-coord, y-coord);

— 伊格纳西奥（Ignacio Ara）
source

-5

采用： $anchorScroll();

与$anchorScroll财产

— 阿瑟·帕尔维兹
source

答案应该是描述性的。

— Farjad Hasan