Question

我正在使用angularJS和ngRoute。当用户向下滚动然后更改路线时，新页面也会向下滚动。我已阅读有关将autoscroll="true"与ngView属性一起使用的信息。但我的问题是，由于我的HTML结构，滚动容器是不我的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>

这就是为什么我autoscroll="true"上的ngView什么也没做，因为没有什么可以滚动的。应该滚动的是ngView上方的容器（在这种情况下为main）。

我怎么能这样做？我更喜欢尽可能少的/简单的JS。像autoscroll属性这样的HTML解决方案会很好。

Answer 1

我找到了一种方法来做到这一点。我创建了一个指令，每次路由更改时都会滚动到我的容器顶部。我可以通过$routeChangeSuccess中的$rootScope事件听取此消息。 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）

1 个答案: