angular7监听滚动条滚动，路由跳转到顶部

监听滚动条滚动

app.component.ts

import { fromEvent } from 'rxjs';

export class AppComponent implements OnInit {
    subscribeScoll: any;

    scrollDis: any = {
        _top: 0
    };

    constructor(
        private router: Router
    ) {}

    ngOnInit() {

        // 监听滚动条滚动
        this.subscribeScoll = fromEvent(window, 'scroll').subscribe((event) => {
            this.onWindowScroll(); // 调用
        });
    }
	
	// 获取滚动条滚动的位置
    scollPostion() {
        let t: any;
        let l: any;
        let w: any;
        let h: any;
        if (document.documentElement && document.documentElement.scrollTop) {
            t = document.documentElement.scrollTop;
            l = document.documentElement.scrollLeft;
            w = document.documentElement.scrollWidth;
            h = document.documentElement.scrollHeight;
        } else if (document.body) {
            t = document.body.scrollTop;
            l = document.body.scrollLeft;
            w = document.body.scrollWidth;
            h = document.body.scrollHeight;
        }
        return {
            top: t,
            left: l,
            width: w,
            height: h
        };
    }
	
	// 获取不同方向上滚动的距离
    onWindowScroll() {
        this.scrollDis._top = this.scollPostion().top;
        console.log(this.scrollDis._top);
    }
}

路由跳转页面滚动到顶部

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
    constructor(
        private router: Router
    ) {}

    ngOnInit() {
        this.router.events.subscribe((event) => {
            document.documentElement.scrollTop = 0;
            document.body.scrollTop = 0;
        });
    }
}