如何复位路由改变滚动位置？ [英] How to reset scroll position on a route change?
问题描述
我把我的第一对夫妇的角度与JS小时，我想写一个SPA吧。然而，改变路线，滚动位置保持在改变路线后，其当前位置。这意味着，如果有人读通过两个网页上的文字的一半，此人将在两时页面的中间改变到第二页之后结束。 （由于页是等长的。）
当我寻找解决办法，我只找人要求正好相反，即他们不希望改变滚动位置，一旦更改页面。但是，我没能重现甚至认为。我不知道如果JS角的发展提前了这个和我咨询的来源是过时的。
我创建了一个最小版本的演示我的问题（只需添加两个文件 sample1.html 和 sample2.html 随机内容，使其工作）：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT;头LANG =ENGT＆;＆LT;标题＆GT; SPA样品＆LT; /标题＆GT;＆LT; /头＆GT;
＆LT;车身数据-NG-应用=对myApp＆GT;
＆LT; DIV的风格=的位置是：固定;＆GT;
＆LT; A HREF =＃/＆GT;主营＆LT; / A＆GT;
＆LT; A HREF =＃/其他＆GT;＆教程LT; / A＆GT;
＆LT; / DIV＆GT;
＆LT; DIV数据-NG-视图=＆GT;＆LT; / DIV＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.angularjs.org/1.2.9/angular.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.angularjs.org/1.2.9/angular-route.min.js＆GT;＆下; /脚本＆GT;
＆LT;脚本＆GT;
VAR对myApp = angular.module（'对myApp'，['ngRoute']）;
myApp.config（函数（$ routeProvider）{
$ routeProvider
。什么时候（'/'， {
控制器：空操作，
templateUrl：sample1.html
}）
。当（'/其他'，{
控制器：空操作，
templateUrl：sample2.html
}）
不然的话（{redirectTo：'/'}）;
}）;
myApp.controller（NOOP'，函数（$范围内）{}）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
由于每 ngView 文件：
自动滚屏（可选）字符串：
无论ngView应该调用$ anchorScroll后滚动视
该视图更新。因此，所有你需要做的就是改变你的
NG-视图呼吁开启自动滚动，像这样：＆LT; DIV NG-视图=自动滚屏=＆GT;＆LT; / DIV＆GT;I spend my first couple of hours with Angular JS and I am trying to write a SPA with it. However, on changing route, the scroll position remains at its current position after changing routes. This means that if someone read through half of the text on page two, this person will end up in the middle of page when two after changing to the second page. (Given that the pages are equally long.)
When I look for solutions I only find people asking for the opposite, i.e. they do not want to change the scrolling position once they change pages. However, I failed to reproduce even that. I wonder if the development of Angular JS got ahead of this and the sources I consulted were outdated.
I created a minimal version that demonstrates my problem (simply add two files
sample1.htmlandsample2.htmlwith random content to make it work.):<!DOCTYPE html> <html> <head lang="en"><title>SPA sample</title></head> <body data-ng-app="myApp"> <div style="position: fixed;"> <a href="#/">Main</a> <a href="#/other">Tutorial</a> </div> <div data-ng-view=""></div> <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script> <script src="http://code.angularjs.org/1.2.9/angular-route.min.js"></script> <script> var myApp = angular.module('myApp', ['ngRoute']); myApp.config(function ($routeProvider) { $routeProvider .when('/', { controller: 'noOp', templateUrl: 'sample1.html' }) .when('/other', { controller: 'noOp', templateUrl: 'sample2.html' }) .otherwise({redirectTo: '/'}); }); myApp.controller('noOp', function ($scope) { }); </script> </body> </html>
解决方案As per the
ngViewdocumentation:autoscroll(optional) string:
Whether ngView should call $anchorScroll to scroll the viewport after the view is updated.
So all you have to do is change your
ng-viewcall to turn on autoscroll like so:<div ng-view="" autoscroll=""></div>
这篇关于如何复位路由改变滚动位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
