如何重置路線更改的滾動位置？

我在Angular JS上度過了我的第一個幾個小時，我正在試着寫一個SPA。然而，在改變路線時，在改變路線之後滾動位置保持在其當前位置。這意味着如果有人通讀了第二頁上的一半文字，這個人在轉換到第二頁之後將會在頁面中間結束。（假設頁面長度相同）如何重置路線更改的滾動位置？

當我尋找解決方案時，我只找到人們詢問相反的內容，即他們在更換頁面後不想更改滾動位置。但是，我甚至沒有重現。我不知道Angular JS的發展是否超前，我諮詢的來源是否過時。

我創建了一個最小版本的演示我的問題（只需添加兩個文件sample1.html和sample2.html隨機內容，使其工作。）：

<!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>

來源

2014-04-01 Rafael Winterhalter

你可能會尋找[$ anchorScroll]（http://docs.angularjs.org/ API/NG /服務/ $ anchorScroll）。 – miqid

我通讀了它。那麼，現在是noop的控制器應該獲得這個錨點滾動並應用它？對不起，我很新的角度。 –

由於每ngView文檔：

自動滾屏（可選）字符串：

是否ngView應該調用$ anchorScroll滾動視圖更新後視。

因此，所有你需要做的就是改變你的ng-view電話開啓自動滾動，像這樣：

<div ng-view autoscroll></div>

來源

2014-08-10 13:34:17

上面的答案解決了我的一半問題，我也想在頁面重裝上做同樣的事情。你能指導如何做到這一點嗎？ –

非常感謝@Matt – kaxi1993

每條路線變更後沒有對$rootScope觸發的事件：$routeChangeSuccess。在最基本的情況下，只聽此事件，並重置滾動位置(0,0)：

$rootScope.$on("$routeChangeSuccess", function(){ 
    window.scrollTo(0,0); 
})

在一點可以存儲更多先進的情況下，每個網址，最後的位置離開的URL之前 - 那麼你應該聽：$routeChangeStart以及。非常原始，存儲可以在$rootScope本身，但我寧願使用JS哈希對象，並保持它作爲簡單的角度值。如果存儲最後的位置應該是永久的（例如在localStorage），那麼你可以考慮使用角度服務。

來源

2014-04-01 12:53:02

連續監聽視窗滾動似乎是必需的，因爲在後退或前進按鈕單擊時，任何事件發生都太遲而無法記錄偏移量。 – Srg

@Srg您的網頁是否完全重新加載或是SPA？如果後者那麼我很確定髒檢查不是必需的。 –

我還沒有看到一個SPA乾淨利用**滑動**支持現在1歲的iOS7 bfCache導航。問題是，對頁面進行任何更改都需要時間，並且沒有任何更改。如果你沒有注意到它，（拿起iOS7 +設備，打開一個SPA，向下鑽取），幾乎回到最後，仔細觀察，然後發佈。當SPA恢復到之前的狀態時，總會有明顯的故障。 – Srg

如何重置路線更改的滾動位置？

回答

相關問題