以上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. 史上最全的各种C++ STL容器全解析

    史上最全的C++ STL 容器大礼包 为什么\(C++\)比\(C\)更受人欢迎呢?除了\(C++\) 的编译令人感到更舒适,\(C++\)的标准模板库(\(STL\))也占了很重要的原因.当你还在用 ...

  2. AHOI 2009 维护序列

    洛谷 P2023 [AHOI2009]维护序列 洛谷传送门 题目描述 老师交给小可可一个维护数列的任务,现在小可可希望你来帮他完成. 有长为N的数列,不妨设为a1,a2,-,aN .有如下三种操作形式 ...

  3. ASP.NET CORE HOW TO ADD "ACCESS-CONTROL-EXPOSE-HEADERS" HEADERS?

    services.AddCors(options =>       {                    options.AddPolicy("AnotherPolicy" ...

  4. pytest执行用例时从conftest.py抛出ModuleNotFoundError:No module named 'XXX'异常的解决办法

    一.问题描述 在项目根目录下执行整个测试用例,直接从conftest.py模块中抛出了ModuleNotFoundError:No module named 'TestDatas'的异常: 二.解决方 ...

  5. @PostConstruct - 静态方法调用IOC容器Bean对象

    需求:工具类里面引用IOC容器Bean,强迫症患者在调用工具类时喜欢用静态方法的方式而非注入的方式去调用,但是spring 不支持注解注入静态成员变量. 静态变量/类变量不是对象的属性,而是一个类的属 ...

  6. bootstrap 自定义模态窗口

    $(".classname").click(function () { $('#mymodel').modal('show'); alert('模态框打开了'); }); $('# ...

  7. .net core event bus

    NServiceBus (收费) https://docs.particular.net/tutorials/quickstart/ MassTransit http://masstransit-pr ...

  8. 深入理解AbstractQueuedSynchronizer(AQS)

    本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...

  9. Python分页爬取数据的分析

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 向右奔跑 PS:如有需要Python学习资料的小伙伴可以加点击下方链 ...

  10. idea的service注入mapper报错

    一.问题 idea的java项目中,service类中注入mapper报错 二.解决 方法1 在mapper类上加上  @Repository 注解即可,当然不加也行,程序也不回报错,是idea的误报 ...