Question

我有一个有多个页面的有角度的网站（对不起，不能在这里链接）

假设我在页面A中，我已向下滚动（n像素）;
在那里，我点击了指向B页的链接;
页面B显示，但它滚动到与我在页面A（n像素）中相同的高度。

这是不受欢迎的：链接页面应从其顶部开始（除非另有说明）。我认为它源于浏览器的内置功能，例如刷新操作将以相同的滚动位置结束。

我试图解决它：

删除所有，认为有角度的＃/导航被锚点捕获。但这没什么关系。
在...上滚动新打开的视图。
- 视图-INIT
- 超时（2-5秒）
- 范围＆＃34; $ on ＆＃34;事件

但是这些导致了B页跳转＆＃34;跳跃＆＃34;有明显的延迟;它困扰可用性（和美学）。

我会尝试在每个链接上滚动到顶部，就在去之前，但它很难（有点傻）

建议？

修改

这是一个单页应用。
我有一个＆＃34; index.html＆＃34;，包含标记。
页面存储为html文件（在同一目录中）

Answer 1

你需要使用$ anchorScroll，在所有页面上都有一些字段..大多数在你的layout.html中有一些id ..

然后在$ routeChangeRequest上将$ location.hash设置为“＃my-page-top-element”

var $locationChangeStart = function () { //evt, next, current
    var currentHash = $location.hash();
    if (angular.isUndefined(currentHash) || currentHash === null || currentHash === '') {
        $location.hash('ng-app');
    }
};

这就是我在我的根控制器中所拥有的......

$scope.$on("$locationChangeStart", routeManagerFactory.$locationChangeStart);

Answer 2

这是不最好的解决方案，但在我的情况下已经足够了; 一般化应该适用于任何页面，而不仅仅是A和B.

我已经关注了@HarishR的答案，这似乎更好，如果我正确地学习了它。谢谢，HarishR

在路线更改之前，滚动到顶部（在页面A＆＃39s的控制器中，原点）。这样，浏览器在到达页面B时不会尝试向下滚动。

A控制器中的代码：

$scope.$on("$locationChangeStart", function(event) {
    var old = $location.hash();
    $location.hash('top');
    $anchorScroll();
    //reset to old to keep any additional routing logic from kicking in
    $location.hash(old);
};

并添加了id =＆＃34; top＆＃34;在A.html

之上

Answer 3

我已经写了一个指令来做那件事......所以我们没有用到anchrorScroll ......

csapp.directive('csScrollTop', ["$window", function ($window) {
    var linkFunction = function (scope) {
        scope.$on("$locationChangeSuccess", function () {
            $window.scrollTo(0, 0);
            //$("html, body").animate({ scrollTop: 0 }, "slow");
        });
    };

    return {
        restrict: 'E',
        link: linkFunction
    };
}]);

如果您想要设置慢动画，请取消注释第二行..并注释掉第一行。并将此指令添加到layout.html / index.html：

<cs-scroll-top></cs-scroll-top>

为什么我想要这是因为我不希望#id出现在浏览器链接框中...

angularJS - 改变视图 - ＆gt;页面没有从顶部显示

3 个答案: