解决angular单页面页面底部跳转到新页面滚动条不在顶部的问题

以上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单页面页面底部跳转到新页面滚动条不在顶部的问题的更多相关文章
- 问题:使用ajax跳转到新页面无效(浏览器Safari)
问题:使用ajax跳转到新页面无效(浏览器Safari) window.open("{% url "runtestinfo" %}") 但是使用loca ...
- PHP弹出提示框并跳转到新页面即重定向到新页面
本文为大家介绍下使用PHP弹出提示框并跳转到新页面,也就是大家所认为的重定向,下面的示例大家可以参考下 这两天写一个demo,需要用到提示并跳转,主要页面要求不高,觉得没必要使用AJAX,JS等, ...
- react中实现点击跳转到新页面方法
实现点击跳转到新页面,可以有两种形式,一个是本地页面打开,一个是本地页面不变跳转到新的页面. (一)页面点击本地页面打开新页面 引入ant的Button组件 <Button style={{ba ...
- H5如何实现关闭当前页面,跳转到新页面?
小程序有此功能的跳转方法. 那么H5如何实现该功能? 很简单. location.replace('new.html') 这个方法可以实现 关闭当前页面,跳转到新页面 的效果. 而 windo ...
- vue-cli跳转到新页面的顶部
我这里有两种方法都是可以用的 1,利用vue-router的默认模式hash,可以记录上一页的位置,如果需要点话,如果没有记录,在进入新页面的时候是返回到新页面的最顶部的 scrollBehavior ...
- Vue路由跳转到新页面时 默认在页面最底部 而不是最顶部 的解决
今天碰到一个问题 vue路由跳转到新的页面时会直接显示页面最底部 正常情况下是显示的最顶部的 而且好多路由中不是全部都是这种情况 折腾好长时间也没解决 最后在网上找到了解决办法 其实原理很 ...
- Java web开发中页面跳转小技巧——跳转后新页面在新窗口打开
最近学习Java web,在学习过程中想实现一个需求,就是在jsp页面跳转的时候,希望跳转后的新页面在新窗口中打开, 而不是覆盖原来的页面,这个需求使我困惑了好长时间,后来通过大海捞针似的在网上寻找方 ...
- vue 单页应用点击某个链接,跳转到新页面的方式
<router-link class="goDetail" :to="{name: 'detail',params: {id:item.id}}" tar ...
- web.config中配置页面出错后跳转指定错误页面
每当用户访问错误页面时,会出现不友好的404错误,所以为了防止这种不友好,我们在web.config中的<system.web>节点下配置 <customErrors>,在出现 ...
随机推荐
- webdriver-键盘操作 for java
2017年01月17日 17:08:25 阅读数:2044 import java.awt.AWTException;import java.awt.Robot;import java.awt.eve ...
- 解决Fiddler在win7系统下的安全证书问题
如果电脑win7系统,一直解决不了Fiddler的证书安装问题,可以试试下面的办法. 在安装证书的时候一直遇到这个问题. 这是因为win7系统的在.net Framework4.0上面的bug引起的. ...
- 大学ACM学习笔记
高斯消元 该来的总会来的系列 int gauss() { for(int i=1;i<=n;i++)//按照列来枚举,当前之前i-1列全消完了 { int k=i; for(int j=i+1; ...
- 云服务AppId或AppKey和AppSecret生成策略
App key和App Secret App key简称API接口验证序号,是用于验证API接入合法性的.接入哪个网站的API接口,就需要这个网站允许才能够接入,如果简单比喻的话:可以理解成是登陆网站 ...
- 用Python做个海量小姐姐素描图
素描作为一种近乎完美的表现手法有其独特的魅力,随着数字技术的发展,素描早已不再是专业绘画师的专利,今天这篇文章就来讲一讲如何使用python批量获取小姐姐素描画像.文章共分两部分: 第一部分介绍两种使 ...
- Spring Boot 2.2.0新特性
Spring Boot 2.2.0 正式发布了,可从 repo.spring.io 或是 Maven Central 获取. 性能提升 Spring Boot 2.2.0 的性能获得了很大的提升. ...
- RPA 可以给医疗行业带来哪些好处
如今,医疗保健行业通过利用颠覆性科学技术,使护理服务更加高效.医疗保健行业已经转向数字化,很多大型医疗机构开始采用 RPA(机器人流程自动化),使医疗服务的竞争力不断攀升.使用 RPA 可以完美自动化 ...
- 易优CMS:arcview基础用法
[基础用法] 名称:arcview 功能:获取单条文档数据 语法: {eyou:arcview aid='文档ID'} <a href="{$field.arcurl}"&g ...
- Java设计模式:Prototype(原型)模式
概念定义 使用原型实例指定待创建对象的种类,并通过拷贝该原型来创建新的对象.Prototype模式允许一个原型对象克隆(复制)出多个与其相同的对象,而无需知道任何如何创建的细节. 应用场景 对象的创建 ...
- oracle中decode函数用法及应用
用法 1.decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 相当于if else 那种方式. 2.decode(字段或字段的运算,值1,值2,值3) 当字段或字段的运 ...