以上jquery,下面js

this.router.events.subscribe((event) => {
document.body.scrollTop=0;
});

另一种写法

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Router, ActivationEnd, NavigationEnd } from '@angular/router'; @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less','../assets/css/style.less'],
encapsulation: ViewEncapsulation.None //Emulated当前 None全局
})
export class AppComponent {
title = '数据平台';
constructor(private router: Router){ }
ngOnInit(){
this.router.events.subscribe((event:NavigationEnd) => {
if (event instanceof ActivationEnd){// 当导航成功结束时执行
document.documentElement.scrollTop = 0;
//document.body.scrollTop.scrollTop = 0;
}
});
}
}

  

  

解决angular单页面页面底部跳转到新页面滚动条不在顶部的问题的更多相关文章

  1. 问题:使用ajax跳转到新页面无效(浏览器Safari)

    问题:使用ajax跳转到新页面无效(浏览器Safari)   window.open("{% url "runtestinfo" %}")   但是使用loca ...

  2. PHP弹出提示框并跳转到新页面即重定向到新页面

    本文为大家介绍下使用PHP弹出提示框并跳转到新页面,也就是大家所认为的重定向,下面的示例大家可以参考下   这两天写一个demo,需要用到提示并跳转,主要页面要求不高,觉得没必要使用AJAX,JS等, ...

  3. react中实现点击跳转到新页面方法

    实现点击跳转到新页面,可以有两种形式,一个是本地页面打开,一个是本地页面不变跳转到新的页面. (一)页面点击本地页面打开新页面 引入ant的Button组件 <Button style={{ba ...

  4. H5如何实现关闭当前页面,跳转到新页面?

    小程序有此功能的跳转方法. 那么H5如何实现该功能?  很简单. location.replace('new.html')  这个方法可以实现 关闭当前页面,跳转到新页面 的效果. 而   windo ...

  5. vue-cli跳转到新页面的顶部

    我这里有两种方法都是可以用的 1,利用vue-router的默认模式hash,可以记录上一页的位置,如果需要点话,如果没有记录,在进入新页面的时候是返回到新页面的最顶部的 scrollBehavior ...

  6. Vue路由跳转到新页面时 默认在页面最底部 而不是最顶部 的解决

    今天碰到一个问题   vue路由跳转到新的页面时会直接显示页面最底部  正常情况下是显示的最顶部的  而且好多路由中不是全部都是这种情况  折腾好长时间也没解决  最后在网上找到了解决办法 其实原理很 ...

  7. Java web开发中页面跳转小技巧——跳转后新页面在新窗口打开

    最近学习Java web,在学习过程中想实现一个需求,就是在jsp页面跳转的时候,希望跳转后的新页面在新窗口中打开, 而不是覆盖原来的页面,这个需求使我困惑了好长时间,后来通过大海捞针似的在网上寻找方 ...

  8. vue 单页应用点击某个链接,跳转到新页面的方式

    <router-link class="goDetail" :to="{name: 'detail',params: {id:item.id}}" tar ...

  9. web.config中配置页面出错后跳转指定错误页面

    每当用户访问错误页面时,会出现不友好的404错误,所以为了防止这种不友好,我们在web.config中的<system.web>节点下配置 <customErrors>,在出现 ...

随机推荐

  1. day88_11_8,事务的隔离级别celery定时订单与项目整合。

    一.事务的隔离级别. mysql的默认数据库级别是可重复读,一般的应用使用的是读已提交 http://www.zsythink.net/archives/1233/ 1. Read UnCommitt ...

  2. layUI学习第二日:非模块化方法使用layUI

    layUI采用非模块化方式(即所有模块一次性加载),操作示例代码如下(如果问怎么创建项目和工具,参考layUI学习第一日的步骤): 运行的结果如下: 运行的显示不会太持久,过几秒就会消失,具体封装的代 ...

  3. 面试必问的Spring IOC详解

    广义的 IOC IoC(Inversion of Control) 控制反转,即“不用打电话过来,我们会打给你”. 两种实现: 依赖查找(DL)和依赖注入(DI). IOC 和 DI .DL 的关系( ...

  4. ASP.NET Core Identity 的示例

    1. appsettings.json { "ConnectionStrings": { "DefaultConnection": "Server=( ...

  5. C#上手练习5(GOTO语句)

    C# goto 语句用于直接在一个程序中转到程序中的标签指定的位置,标签实际上由标识符加上冒号构成 语法形式如下. goto Labell;    语句块 1;Labell    语句块 2; 如果要 ...

  6. awk 输出前 N 列的最简单方法

    最近遇到一种场景,需要输出一个文本信息的前 N 列. 众所周知 cut 可以指定分隔符并指定列的范围,如 cut -d' ' -f-4 就是以空格为分隔符输出前 4 列.但是 cut 的分隔符只能是一 ...

  7. JS是解释型还是编译型语言?

    解释型和编译型语言 解释型语言 解释型语言是对代码进行一句一句的直接运行,在程序运行期间,使用解释器动态将代码解释为机器码,再运行. 编译型语言 编译型语言是需要使用编译器先对代码进行编译为机器码,再 ...

  8. iOS常用宏定义--实用

    在这里给大家分享一些常用的宏定义,喜欢的小伙伴可以直接在项目中使用(持续更新)!为了大家使用方便,请点击GitHub - 宏定义头文件下载 ! 1.获取屏幕宽度与高度 #define SCREEN_W ...

  9. mac安装linux

    http://www.mamicode.com/info-detail-503881.html

  10. 版本管理·玩转git(分支管理)

    在开发中,遇到这样的情况怎么办? 网站已有支付宝在线支付功能,要添加"微信支付",修改了两个文件,wechat.php.pay.php. 刚做到一半,突然有个紧急bug:支付宝支付 ...