解决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>,在出现 ...
随机推荐
- 2019-2020-1 20199305《Linux内核原理与分析》第五周作业
系统调用的三层机制(上) (一)用户态.内核态和中断 (1)Intel x86 CPU有4种不同的执行级别 分别是0.1.2.3,数字越小,特权越高.Linux操作系统中只是采用了其中的0和3两个特权 ...
- 80道最新java基础部分面试题(六)
自己整理的面试题,希望可以帮到大家,需要更多资料的可以私信我哦,大家一起学习进步! 59.ArrayList和Vector的区别 答: 这两个类都实现了List接口(List接口继承了Collecti ...
- Nacos集群搭建过程详解
Nacos的单节点,也就是我们最开始使用的standalone模式,配置的数据是默认存储到内嵌的数据库derby中. 如果我们要搭建集群的话,那么肯定是不能用内嵌的数据库,不然数据无法共享.集群搭建的 ...
- Java连载41-this关键字其他注意事项、static方法
一.this关键字 1.this在多数情况下都会省略 2.this不能用在含有static的方法之中. 3.static的方法的调用是不需要对象的,直接使用格式:类名.方法名:没有当前对象,自然不能访 ...
- js判断浏览器是否安装或启用了flash的方法总结
目录 # js判断浏览器是否安装或启用了flash的方法 # chrome浏览器启用flash插件的方法 # 参考 # js判断浏览器是否安装或启用了flash的方法 在传统浏览器,可以使用windo ...
- 【Linux命令】setterm命令修改虚拟机颜色显示(目录及背景颜色)
VMware设置目录及颜色显示 进入linux界面,默认背景为黑色,字体为白色 一.setterm命令 setterm向终端写一个字符串到标准输出,调用终端的特定功能.在虚拟终端上使用,将会改变虚拟终 ...
- 『嗨威说』算法设计与分析 - 回溯法思想小结(USACO-cha1-sec1.5 Checker Challenge 八皇后升级版)
本文索引目录: 一.回溯算法的基本思想以及个人理解 二.“子集和”问题的解空间结构和约束函数 三.一道经典回溯法题点拨升华回溯法思想 四.结对编程情况 一.回溯算法的基本思想以及个人理解: 1.1 基 ...
- ubuntu命令查看英伟达显卡型号
在终端输入如下命令:nvidia-smi
- Django JsonResponse 不自动设置 cookie 的解决方案
[背景] 目前在做一个前后端分离的 web 项目,后端使用的是 django 框架,所有的 API 都只返回 json :就在这个过程中遇到了一个问题,那就是对于所有的 JsonResponse dj ...
- Spark Streaming Listener 监控批次处理延迟进行告警
概述 StreamingListener 是针对spark streaming的各个阶段的事件监听机制. StreamingListener接口 //需要监听spark streaming中各个阶段的 ...