在之前的版本中滾動條位置是一個大問題，主要表現在

1. 使用快捷鍵或者手勢前進/後退的時候，滾動條的位置經常是錯亂的，所以只能每個頁面都要重置一個滾動條的位置；

2. #anchor1 錨點位置無法定位

2017年10月開始解決這個問題，歷時7個月終於在 6.1 beta1 中解決了。

解決方案就是增加了一個全新的特性 Scroll Position Restoration，滾回到之前的位置。

有人詳細介紹了這個特性，點我查看

今天我嘗試了一下 ViewportScroller 的 scrollToAnchor，跳轉到錨點。

//註入 ViewportScroller
constructor(private scroller: ViewportScroller) { }

在頁面底部添加一個 id=‘foot‘ 的元素，註意要保證該元素超過瀏覽器的視野，不然就不會出現滾動條了，也就看不到效果了。

測試結果很成功，於是改成正式代碼

 ngOnInit() {
   //初始化
    this.scroller.scrollToAnchor(this.route.snapshot.fragment);
 }

結果報錯了

Uncaught (in promise): SyntaxError: Failed to execute ‘querySelector‘ on ‘Document‘: ‘#8e2c2c4e-3722-4645-bd12-af14da8cef96‘ is not a valid selector.
Error: Failed to execute ‘querySelector‘ on ‘Document‘: ‘#8e2c2c4e-3722-4645-bd12-af14da8cef96‘ is not a valid selector.
 

原來是 selector 選擇器不正確，但是為什麽不正確呢？看看它的實現就知道了。

// https://github.com/angular/angular/pull/20030/files
+  scrollToAnchor(anchor: string): void {
+    if (this.supportScrollRestoration()) {
+      const elSelectedById = this.document.querySelector(`#${anchor}`);
+      if (elSelectedById) {
+        this.scrollToElement(elSelectedById);
 
+        return;
+      }
+      const elSelectedByName = this.document.querySelector(`[name=‘${anchor}‘]`);
+      if (elSelectedByName) {
+        this.scrollToElement(elSelectedByName);
+        return;
+      }
+    }
+  }

原來內部調用的是 querySelector，在 MDN 上看一下文檔，原來必須是 css 選擇器

Note: Characters that are not part of standard CSS syntax must be escaped using a backslash character. Since JavaScript also uses backslash escaping, be especially careful when writing string literals using these characters. See Escaping special characters for more information.

而我的代碼裏用的是 GUID，由於以數字開頭，所以不符合語法規範。解決辦法就很簡單了，在它前面加一個字母就行了。

 ngOnInit() {
   //初始化
    this.scroller.scrollToAnchor(‘a‘+this.route.snapshot.fragment);
 }

別忘了在 HTML 模版中的錨點中也要加上這個字母。

ng6.1 新特性：滾回到之前的位置