解决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>,在出现 ...
随机推荐
- Rust v1.39发布 - 这个编程语言真不一般!
https://zhuanlan.zhihu.com/p/90612241 今天(2019-11-07)Rust终于发布了期待已久的v1.39版本,增加了重量级的async/await关键字支持.Ru ...
- python3的ExecJS安装使用
参考官方文档安装 pip3 install PyExecJS 代码编写 import execjs ctx = execjs.compile(""" function a ...
- Codeforces Round #599 (Div. 1) A. Tile Painting 数论
C. Tile Painting Ujan has been lazy lately, but now has decided to bring his yard to good shape. Fir ...
- Codeforces Round 596 题解
万幸的是终于碰上了一场上分好场. 不幸的是一开始差点不会 A. 万幸的是想了个不那么稳的结论过了 pretest. 不幸的是罚时很高,而且慌得一比. 万幸的是然后半个小时内把 B 和 C 码了. 不幸 ...
- python接口自动化8-unittest框架使用
前言 unittest:Python单元测试框架,基于Erich Gamma的JUnit和Kent Beck的sSmalltalk测试框架. 一.unittest框架基本使用 unittest需要注意 ...
- IT兄弟连 Java语法教程 流程控制语句 分支结构语句4
4 嵌套if-else条件语句 嵌套if语句是作为另一个if或else语句的目标的if语句.嵌套if语句在程序设计中非常普遍.Java中,关于嵌套if语句需要记住的是,else语句总是和同一代码块中 ...
- 【洛谷5008】逛庭院(Tarjan,贪心)
[洛谷5008]逛庭院(Tarjan,贪心) 题面 洛谷 题解 如果图是一个\(DAG\),我们可以任意选择若干个不是入度为\(0\)的点,然后把它们按照拓扑序倒序删掉,不难证明这样一定是合法的. 现 ...
- java高并发系列 - 第3天:有关并行的两个重要定律
有关为什么要使用并行程序的问题前面已经进行了简单的探讨.总的来说,最重要的应该是处于两个目的. 第一,为了获得更好的性能: 第二,由于业务模型的需要,确实需要多个执行实体. 在这里,我将更加关注第一种 ...
- 2019 Python100道 面试 题,你会几道?
0 遇到过得反爬虫策略以及解决方法? 1.通过headers反爬虫 2.基于用户行为的发爬虫:(同一IP短时间内访问的频率) 3.动态网页反爬虫(通过ajax请求数据,或者通过JavaScript生成 ...
- nikto---基本使用
目录 一:基本使用 二:调节扫描过程 三:命令行选项 四:配置文件 注意:使用版本:Nikto v2.1.6 功能:Web服务器评估工具,目的在于查找任何类型的Web服务器的各种默认和不安全的文件,配 ...