Question

当用户点击链接时，有没有办法配置Angular2路由器跳转到浏览器窗口的顶部？

首先接触ang2所以请原谅看似noobish Q.

我们有一个简单的瓷砖列表，其中每个瓷砖都是一个简单的产品列表，单击瓷砖将用户带到所述产品的详细信息页面...一切正常。

当列表较长时，浏览器窗口较高且产品页面长度相等或较长，当用户点击所述产品时，浏览器垂直滚动条会保持不变...

我们可以在js中放置一个hack（例如：Scroll to the top of the page using JavaScript/jQuery?）来强制浏览器向上滚动，但似乎这可能/应该是路由器会做的事情？

Answer 1

要在每个路由器URL更改时将页面滚动到顶部，请在app.component.ts中添加路由器事件（如果您延迟加载子项）或者发送路由的父组件。

import { Router, Event as RouterEvent, NavigationEnd} from '@angular/router';

constructor(private router:Router){
  router.events.subscribe((event: RouterEvent) => { /* detects route/navigation change*/
       this.scrollToPageTop(event);
   });
}

scrollToPageTop(event: RouterEvent): void { /* scroll to top on each navigation */
        if (event instanceof NavigationEnd) { /* trigger on  navigation ends */
           document.documentElement.scrollTop = 0; /* for IE */
           document.body.scrollTop = 0; /*for chrome */
        }

}

Angular 2长页过渡到新的长页跳转到顶部？

1 个答案: