AngularJS + Safari: 当页面切换时，强制页面滚动到顶部
AngularJS + Safari: 当页面切换时，强制页面滚动到顶部
我在使用AngularJS时遇到了奇怪的、仅在Safari中出现的滚动行为。每当用户在页面之间切换时，页面会像使用AJAX一样被更改。虽然我知道它们是在AngularJS中，但结果是当用户切换页面时，浏览器不会自动滚动到顶部。
我尝试在每个控制器的顶部强制浏览器滚动到顶部，但似乎没有任何效果。
我在每个控制器的顶部运行以下JavaScript代码：
document.body.scrollTop = document.documentElement.scrollTop = 0;
这是一个仅在Safari中出现的bug，其他浏览器在页面更改时会自动滚动到顶部。有人遇到过类似的问题或者有更好的解决方法吗？
问题出现的原因：
当在AngularJS应用程序中切换页面时，页面不会自动滚动到顶部。这可能会导致用户在浏览新页面时不断向下滚动，而不是从新页面的顶部开始。
解决方法：
有两种方法可以解决这个问题。
方法一：使用$anchorScroll()函数。
在AngularJS文档中，可以找到$anchorScroll()函数的说明。该函数用于滚动到指定的元素，但如果只想滚动到页面的顶部，可以使用$window.scrollTo(0, 0)。
方法二：将autoscroll="true"添加到ngView元素。
通过在ngView元素上添加autoscroll="true"属性，可以实现自动滚动到新页面的顶部。例如：
另外，还有一个更适合许多情况的解决方法，可以在下面的链接中找到更多信息：
AngularJS + Safari: 强制页面在页面切换时滚动到顶部的问题出现的原因是Safari浏览器在页面切换时不会自动将页面滚动到顶部。 解决方法可以使用以下代码：
.run(["$rootScope", "$window", '$location', function($rootScope, $window, $location) {
$rootScope.$on('$routeChangeStart', function(evt, absNewUrl, absOldUrl){
$window.scrollTo(0,0); //每次路由切换后将页面滚动到顶部
})
}])
或者对于标签切换，可以在控制器中使用 `$window.scrollTo(0,0);`。只需要将 `$routeChangeStart` 改为 `$routeChangeSuccess`，这样滚动效果将是无感知的。
喜欢这个解决方案。谢谢 🙂 将其添加到你的 XXX.config 中。
问题的原因是在切换页面时，页面没有自动滚动到顶部。解决方法是使用$window.scrollTo(0,0)来滚动页面到顶部。另外，还可以使用一个名为angular-scroll的插件来实现页面滚动，并且支持动画效果。需要注意的是，在控制器中添加$window的引用，否则滚动功能无法正常工作。另外，提醒一下，虽然在README文件中已经说明了，但是这个插件的存储库已经迁移到了https://github.com/oblador/angular-scroll。