以上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. Re-爬楼梯

    题目地址 https://dn.jarvisoj.com/challengefiles/CFF_100.rar.dbeee1536c0a5ef5844f42c93602aae5 看看功能,看样子要爬到 ...

  2. mysql深入学习(一)

    Mysql高级学习 一.Mysql简介 1.概述 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一种关联数据库管理系统,将数据保存在不同 ...

  3. 什么是uWSGI、WSGI、uwsgi、wsgiref、werkzeug

    我不是代码的生产者,我只是知识的搬运工 uWSGI.WSGI.uwsgi.wsgiref.werkzeug

  4. Java程序猿想要月薪2万+必须必备哪些技术?

    现在程序员是比较紧俏的一个岗位,其实可以写代码的人许多,但是为什么程序员还那么缺呢? 除了需求大以外,还有一个原因就是,实在合格的程序员确实比较少. 想要成为一个合格的程序员,咱们需求满意以下几点要求 ...

  5. python接口测试:如何将A接口的返回值传递给B接口

    在编写接口测试脚本时,要考虑一个问题:参数值从哪里获取 一种方式是可以通过数据库来获取,但是通过这次接口测试,我发现读取数据库有一个缺点:速度慢 可能和我的sql写法有关,有些sql加的约束条件比较少 ...

  6. Codeforces Round #603 (Div. 2) F. Economic Difficulties dp

    F. Economic Difficulties An electrical grid in Berland palaces consists of 2 grids: main and reserve ...

  7. 基于python的selenium常用操作方法(1)

    1 selenium定位方法    Selenium提供了8种定位方式. ·         id ·         name ·         class name ·         tag ...

  8. 在 ASP.NET Core 中使用 ApplicationPart 的简单示例

    1. 项目截图: 2. 代码 <Project Sdk="Microsoft.NET.Sdk"> <PropertyGroup> <TargetFra ...

  9. WPF中Expander的用法和控件模板详解

    一.Expander的用法 在WPF中,Expander是一个很实用的复合控件,可以很方便的实现下拉菜单和导航栏等功能.先介绍简单的用法,而后分析他的控件模板. <Window.Resource ...

  10. Docker开启Remote API 访问 2375端口

    Docker常见端口 我看到的常见docker端口包括: 2375:未加密的docker socket,远程root无密码访问主机2376:tls加密套接字,很可能这是您的CI服务器4243端口作为h ...