路线更改后滚动到顶部（嵌套 div）

Question

我正在使用 angularJS 和 ngRoute。当用户向下滚动然后更改路线时，新页面也会向下滚动。我已经阅读了有关将 autoscroll="true" 与 ngView 属性一起使用的信息。但我的问题是，由于我的 HTML 结构，滚动容器 NOT 我的 ngView。就我而言，它看起来是这样的：

<body>
    <!-- main container allows overflow scrolling and should be scrolled to top -->
    <main>
        <!-- this container has no scrolling -->
        <div ngView><!-- content comes here --></div>
    </main>
</body>

所以这就是为什么我的 ngView 上的 autoscroll="true" 什么都不做，因为没有可滚动的内容。应该滚动的是我 ngView 上方的容器（在本例中为 main）。

我该怎么做？我希望尽可能使用 less/easy JS。像自动滚动属性这样的 HTML 解决方案当然会很好。

Answer 1

我想出了一个方法来做到这一点。我创建了一个指令，每次更改路线时都会滚动到容器的顶部。我可以通过 $rootScope 中的 $routeChangeSuccess 事件收听这个。 scrollTop() 函数是我正在使用的 jQuery 的一部分。

HTML:

<!-- scrollable content container -->
<main id="pageWrap" scroll-top-on-route-change>
    <!-- non-scrollable page content, templates inserted by ngView -->
    <div id="pageContent" ng-view></div>
</main>

JS:

app.directive("scrollTopOnRouteChange", [
    "$rootScope",
    function ($rootScope) {
        return {
            restrict: "A",
            link : function ($scope, $element) {
                $rootScope.$on("$routeChangeSuccess", function () {
                    $element.scrollTop(0);
                });
            }
        };
    }
]);

路线更改后滚动到顶部（嵌套 div）

Scroll to top after route has changed (nested divs)

javascript

autoscroll

angularjs

ng-view

ngroute