Question: angular2 scroll top on router change

当我们在第一个路由滑动到底部当我们点击导航跳转到另一个路由时页面没有回到顶部而是保持上一个路由的滚动位置,基本的解决办法有两种。

第一种解决方法是在组建的ngOnIinit()中进行调换路由后的重置

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router'; @Component({
selector: 'my-app',
template: '<ng-content></ng-content>',
})
export class MyAppComponent implements OnInit {
constructor(private router: Router) { } ngOnInit() {
this.router.events.subscribe((evt) => {
if (!(evt instanceof NavigationEnd)) {
return;
}
window.scrollTo(0, 0)
});
}
}

第二种解决方法是在import中对路由进行注入的时候设置scrollPositionRestoration参数(angular6之后)。

RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})

关于angular跳转路由之后不能自动回到顶部的解决方法的更多相关文章

  1. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  2. Win10电脑经常自动掉线、自动断网的解决方法

    近期一客户称自己使用电脑上网的时候,过一段时间莫名其妙的出现自动掉线.自动断网的情况,那么遇到这个问题该怎么办?下面装机之家分享一下Win10电脑经常自动掉线.自动断网的解决方法,以Win7系统为例. ...

  3. powerdesigner 不能自动生成注释的解决方法

    解决power designer 不能自动生成注释的解决办法只需要3步: 一.快捷键 Alt+Shift+X 打开脚本编辑器: 二.将下面天蓝色的字体脚本添加到脚本编辑器里面: Option Expl ...

  4. powerdesigner 不能自动生成注释的解决方法(三步解决)

    解决power designer 不能自动生成注释的解决办法只需要3步: 一.快捷键 Ctrl+Shift+X 打开脚本编辑器:(快捷键不能执行的话可以从这个路径执行:Tools --> Exc ...

  5. ecshop后台登录频繁自动退出问题终极解决方法集锦

    ecshop后台登录后,有时候会自动退出,而且还会很频繁,有的是后台操作两下就莫名退出了,有的是恰好三分钟左右登出.这让管理员很恼火,严重影响了后台使用.对于这一问题,网络上可给的解决方法各有不同.千 ...

  6. 百度Ueditor编辑器的Html模式自动替换样式的解决方法

    百度的Ueditor编辑器出于安全性考虑,用户在html模式下粘贴进去的html文档会自动被去除样式和转义.虽然安全的,但是非常不方便. 做一下修改把这个功能去掉. 一.打开ueditor.all.j ...

  7. Eclipse新版 syso无法自动补全的解决方法

    症状: 以前输入Syso可以直接自动转化为System.out.println(""); 现如今居然还要让我手动选择一下才可以! 我仔细看了一下Eclipse的插件,发现是新版Ec ...

  8. wampserver 点击跳转localhost变0.0.0.0的解决方法!

    最近下载新版本wampserver发现点击项目不会自动添加localhost了,导致访问项目很麻烦. 修改如下 修改wamp根目录下的wampmanager.conf urlAddLocalhost ...

  9. 关于锚点页内链接跳转出现问题(不响应,没有反应)的解决方法(ZT)

    我们知道,利用锚点可以实现页面链接跳转,也可以实现同一页面内的跳转功能. 例如:<a href="somepage.htm>某页面链接</a>  可以跳转链接到som ...

随机推荐

  1. lower_bound()和upper_bound()用法详解

    lower_bound( )和upper_bound( )都是利用二分查找的方法在一个排好序的数组中进行查找的. lower_bound( begin,end,num):从数组的begin位置到end ...

  2. 【python】两行代码实现近百年的正反日期查询--20200202

    到2020年了.有个日期也火了,记得上一次还是2011年11月2日.为啥捏,因为日期写成数字形式 正反是一样的. 2020年也有一个这样的日期.20200202:2020年2月2日. 于是乎想写一段代 ...

  3. 6)PHP,预定义变量

    预定义变量也叫超全局变量: :预定义变量又叫超全局变量,包括: $_GET, $_POST, $_SERVER, $_REQUEST, $GLOBALS, $_COOKIE, $_SESSION, . ...

  4. tensorflow(二)

    使用图来表示计算任务 在被称之为session的上下文中执行图 使用tensor表示数据 通过变量来维护状态 使用feed和fetch可以为任意的操作复制或者从其中获取数据 tensorflow是一个 ...

  5. 二十五、SSH服务企业级应用场景

    一.需求分析: 要求所有服务器在同一个用户oldboy1系统用户下,实现A机器从本地分发数据到B\C机器上,在分发过程中不需要B\C的提示系统密码验证,除了分发功能,还需要可以批量查看客户上的cpu. ...

  6. [LC] 322. Coin Change

    You are given coins of different denominations and a total amount of money amount. Write a function ...

  7. if necessary

  8. 分类算法之KNN分类

    1.介绍 KNN是k nearest neighbor 的简称,即k最邻近,就是找k个最近的实例投票决定新实例的类标.KNN是一种基于实例的学习算法,它不同于贝叶斯.决策树等算法,KNN不需要训练,当 ...

  9. 70-persistent-net.rules无法自动生成,解决方法

    无法自动生成70-persistent-net.rules文件的原因: 在更换linux内核前修改ifcfg-eth0文件,更换内核,使用dhclient无法动态分配IP,删掉70-persisten ...

  10. Mybatis的generator自动生成代码

    mybatis-generator有三种用法:命令行.ide插件.maven插件.本次使用maven生成 环境:IDEA,mysql8,maven (1):新建项目,本次以SpringBoot项目为例 ...