angualarJS - 改变视图 - >页面不从顶部

显示我有一个角度的网站多个页面（抱歉，不能链接在这里）angualarJS - 改变视图 - >页面不从顶部

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

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

我试图解决它：

全部删除，以为角的＃/导航被困通过锚定。但没关系。
滚动上一家新开张的看法...
- 视图初始化
- 超时（2-5秒）
- 范围的 “$上” 事件

但这些导致页面B“跳”明显延迟;它影响可用性（和美学）。

我要去尝试滚动到顶部的各个环节上，只是要过，但它是困难的（那种愚蠢）

建议？

编辑

这是一个单页的应用程序。
我有一个“index.html”，包含标签。

来源

2014-07-15 Berry Tsakala

您使用角度ui路由器？ –

@MohammadSepahvand不，从未听说过它。我宁愿不使用它：他们写道API是不稳定的，而且我正在制作一个产品。 –

嗯，我只是问，因为这是[已知]（http://stackoverflow.com/questions/21711939/cant-figure-out-why-page-loads-at-bottom-angular-ui-router-autoscroll-问题）与ui路由器的问题。无关紧要，但我们一直在生产中使用它几个月，并发现它没问题，我认为API不那么不稳定，我认为哟;也许是指UI引导。但是ui路由器真的让生活变得更加简单。 –

你需要使用$ anchorScroll，大多已在一些ID您的layout.html上的所有页面的顶部某些领域..

页面保存为HTML文件（在同一目录）。。

，然后在$ routeChangeRequest设置你的$的location.hash以“＃我的页面顶部元素”

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);

来源

2014-07-15 18:53:39 harishr

我不知道我在追随：什么是“顶部领域”？我没有“layout.html”（我确实有“index.html”，包含）。它是对链接和路线的补充或替代吗？ –

$ anchorScroll是如何工作的，它滚动到给定id的元素，例如可以说id是'ng-app'，现在如果页面顶部有一个id ='ng-app'的元素，那么滚动将位于顶部，如果其底部位于底部... $ location。 hash（'ng-app'）会将页面滑动到所提供的id ... – harishr

我没有足够的角度来充分理解您的问题，但是我基于您的答案构建了一个足够好的解决方案。 dania baad –

这是不是最好的解决方案，但它对我来说已经足够了;它应该是概括工作在任何页面上，不只是A和B.

我跟着@HarishR的回答，这似乎更好，我学会了正确的。谢谢HarishR

在改变路线之前，滚动到顶部（在页面A的控制器中，原点）。这样抵达网页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 =“顶”上A.html

来源

2014-07-15 20:20:32

的顶部我写了一个指令，要做到这一点..所以我们没有使用到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出现在布劳尔链接中...

来源

2014-07-16 06:39:21 harishr

angualarJS - 改变视图 - >页面不从顶部

回答

相关问题