Angular 5滚动页面到顶部(scroll top)

选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。

例如在文章页面组件PostComponent,对于的路由为/posts/:id。

export class PostComponent implements OnInit {
post$: Observable<Post>;
private selectedId: number;
constructor(
private service: PostService,
private route: ActivatedRoute
) {}
ngOnInit() {
this.heroes$ = this.route.paramMap
.switchMap((params: ParamMap) => {
this.selectedId = +params.get('id');
return this.service.getPost();
});
}
}

切换id时,PostComponent组件不会重新加载,只会重新渲染组件内容。在有滚动条页面,重新渲染组件内容时,滚动条不会回到页面顶部。

对于app的页面,可以使用window.scroll()方法,如

app.component.html

<router-outlet (activate)="onActivate($event)" ></router-outlet>

app.component.ts

onActivate(event) {
window.scroll(0,0);
....
}

如果是页面内的元素有滚动条,window.scroll()可能不行,可以使用top.scrollIntoView()。如

出现滚动条的元素

<div id="top"></div>

PostComponent

ngAfterViewInit() {
let top = document.getElementById('top');
if (top != null) {
top.scrollIntoView();
top = null;
}
}

版权声明:著作权归作者所有。

有么有全部代码
相关推荐

Angular4使用Rxjs5共享Http请求返回的结果数据

在使用Angular开发的单页面应用里,有时需要处理这种场景:使用http请求某个数据,数据请求成功后需要把数据更新到多个组件里。也就是说,有多个observer(观察者)对http请求数据返回的Observable订阅。getDta() {     return this.http.get('/dataUrl').map(res&nbs

使用pace.js在页面顶部添加加载进度条

很多网站(如Github,Stackoverflow)在加载页面时,页面的顶部会看到页面加载进度条。使用pace.js可以很简单的实现此功能。下载pace.jspace官网下载:http://github.hubspot.com/pace/docs/welcome/(包含主题介绍)Github下载:https://github.com/HubSpot/pace完整zip包:http://githu

[译]Angular 5:升级和新功能的总结

代号为pentagonal-donut的Angular 5刚刚发布,它带来了一些新功能以及一些内部变化,这些会让Angular应用变得更小,执行变得更快。 在这篇文章中,我们将简要介绍一些最重要的变化以及升级指南。 有关更多详细信息,请参阅公告博客帖子,有关所有更改的详细信息,请参阅官方更新日志。性能这是Angular 5包含的一些改变,它会让你的应用变得更

Angular 5:HttpClient的基本用法

Angular 4.3引入了新的用于http请求的接口HttpClient。它旨在替换之前版本的接口Http。有以下新特性:对响应的body做类型检查默认返回的是JSON对象,不再需要使用json()显式解析返回的数据支持拦截器支持进度事件请求后验证和基于刷新的测试框架安装HttpClientModuleHttpClient属于@angular/common/http包的模块HttpCl

Angular 5配置使用service-worker

Angular 5实现了一个适用于Angular应用的Service Worker,Angular CLI 1.6也添加了对service worker的支持。使用Angular CLI对应用添加service worker的支持分两种情况:新项目应用中添加service worker在已有项目中添加service&n

纯JavaScript检测页面是否加载完成(理解JavaScript页面加载事件)

JavaScript与页面加载相关的事件先介绍JavaScript与页面加载相关的几个事件:document.readystatechangereadystatechage事件会监控document.readyState。readyState有三个值:loading:文档正在加载interactive:文档已加载完成且已被解析,但子资源(如image,css,iframe等)仍在加载。comple

Angular 5获取当前的路由url及参数

获取当前加载组件的路由信息可以使用ActivatedRoute。ActivatedRoute接口如下:interface ActivatedRoute {    snapshot: ActivatedRouteSnapshot   url: Observable<UrlSegment[]> &nb