解决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>,在出现 ...
随机推荐
- 201871010116-祁英红《面向对象程序设计(java)》第八周学习总结
项目 内容 <面向对象程序设计(java)> https://home.cnblogs.com/u/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.c ...
- LG1131 「ZJOI2007」时态同步 树形DP
问题描述 LG1131 题解 正难则反,把从一个点出发到叶子结点看做从叶子结点走到那个点. DP方程很显然. \(\mathrm{Code}\) #include<bits/stdc++.h&g ...
- MySQL select from where multiple conditions
Maybe one of the most used MySQL commands is SELECT, that is the way to stract the information from ...
- golang数据结构之选择排序
//SelectSort 选择排序 func SelectSort(arr *[]int) { ; i < len(arr); i++ { tmp := arr[i] index := i ; ...
- 踩过了这些坑,你真的懂python基础吗?
一.浮点数的计算 思考1:打印结果是什么? a = 0.1 b = 0.2 c = 0.3 print(b == a + a) 思考2:打印结果是什么? a = 0.1 b = 0.2 c = 0.3 ...
- 邮件hMailServer +Foxmail 安装使用教程
hMialServer是Windows下一款免费开源的邮件服务器软件,支持smtp.pop3.imap. 本文主要根据官方文档Quick-Start guide整理而成. 一.下载 下载地址:http ...
- 模型可视化工具netron
https://github.com/lutzroeder/Netron 支持各种格式的模型 caffe模型实测效果: 右侧可以看到卷积核的具体的值.
- 使用Node.js简单创建一个服务器
首先,我们要了解Node.js不是一种语言,它只是一个除了浏览器之外的,可以运行js的环境. 其次,Node能做些什么 ? web服务器. 命令行工具. 网络爬虫. 桌面应用程序开发等 3.接下 ...
- git 配置远程仓库(同一个邮箱注册多个gitlab仓库)
之前配置的全局用户和邮箱,如果是多个注册账户就不能设置为全局账户 git config --global user.name "username" git config --glo ...
- CSS3常用新特性
CSS3的新特性 新增CSS3特性有兼容性问题,ie9+才支持 移动端支持优于PC端 新增选择器和盒子模型以及其他特性 CSS新增选择器 属性选择器 属性选择器可以根据元素特定属性来选择元素,这样就可 ...