Javascript 滚动顶部成角2

我正在开发angular2 web应用程序，我需要以下方面的帮助。 我的页面由多个组件组成。我想在用户单击按钮时滚动页面顶部。我试过了

---

document.body.scrollTop=0但这在Chrome中不起作用。我尝试了document.documentElement.scrollTop=0；滚动到（0，0）；但是不工作
像这样导入

import { Inject} from "@angular/core";
import { DOCUMENT } from '@angular/platform-browser';

this.document.body.scrollTop = 0;

在构造函数中添加此

constructor(@Inject(DOCUMENT) private document: Document) { }

然后你可以像这样在任何地方设置滚动

import { Inject} from "@angular/core";
import { DOCUMENT } from '@angular/platform-browser';

this.document.body.scrollTop = 0;

在app.component.ts中

const mainDiv = document.getElementById('mainDIV');
mainDiv.scrollTop = 0;

在app.component.html中

<div id="mainDIV" style="height: 100vh;overflow: auto;">
    <app-header></app-header>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
</div>

我使用数据绑定解决了角度滚动问题：

<div class="container" [scrollTop]="scrollTop"> ... </div>

我提议为此写一份指令。确保将其导入到您正在使用的模块中

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[scrollToTop]'
})
export class ScrollToTopDirective {
  @HostListener('click')
  public onClick() {
    if (window && window.pageYOffset) {
      window.scroll(0, 0);
    }
  }
}

然后像下面那样使用它

<button scrollToTop>Scroll to Top</button>

滚动到顶部

还应考虑根据最佳实践将前缀添加到指令中

只需使用：

window.scroll(0, 0);

如果不是窗口滚动，而是使用自己的滚动进行div，则应该可以：

Gloabal服务窗口参考：

import { Injectable } from '@angular/core';

function _window(): any {
  // return the global native browser window object
  return window;
}

@Injectable()
export class WindowRef {
  get nativeWindow(): any {
    return _window().document;
  }
}

将其添加到构造函数：

constructor(private winRef: WindowRef) {}

在代码中，您要将其放在哪里，只需添加以下行：

this.winRef.nativeWindow.getElementsByClass('nameOfClass')[0].scroll(0, 0);

当然，您也可以使用其他选择器，如：getElementByTagName、getElementById、getElementByName…
请使用下面的代码。我的情况

this.document.body.scrollTop = 0

不工作，但

this.document.documentElement.scrollTop = 0

工作。因此，可能存在一些浏览器依赖性

import { Inject} from "@angular/core";
import { DOCUMENT } from '@angular/platform-browser';

constructor(@Inject(DOCUMENT) private document: Document) { }
this.document.documentElement.scrollTop = 0;

html代码：

<div class="scroll-to-top" [ngClass]="{'show-scroll': navIsFixed}">
            <button (click)="scrollToTop()">
                Top
            </button>
        </div>

ts代码：

import {Component, OnInit, Inject, HostListener} from '@angular/core';
import { DOCUMENT } from "@angular/platform-browser";
import { BrowserModule } from '@angular/platform-browser';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hard Hitter@Cool';
  navIsFixed: boolean;
  constructor(@Inject(DOCUMENT) private document: Document){

  }
  @HostListener("window:scroll", [])
  onWindowScroll() {
      if (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop > 100) {
          this.navIsFixed = true;
      } else if (this.navIsFixed && window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop < 10) { this.navIsFixed = false; } } scrollToTop() { (function smoothscroll() { var currentScroll = document.documentElement.scrollTop || document.body.scrollTop; if (currentScroll > 0) {
              window.requestAnimationFrame(smoothscroll);
              window.scrollTo(0, currentScroll - (currentScroll / 5));
          }
      })();
  }

}

从'@angular/core'导入{Component，OnInit，Inject，HostListener}；
从“@angular/platform browser”导入{DOCUMENT}”；
从“@angular/platform browser”导入{BrowserModule}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
标题='硬Hitter@Cool';
navIsFixed：布尔型；
构造函数（@Inject（DOCUMENT）私有文档：DOCUMENT）{
}
@HostListener（“窗口：滚动”，[]）
onWindowScroll（）{
如果（window.pageYOffset | | | document.documentElement.scrollTop | | | document.body.scrollTop>100）{
this.navIsFixed=true；
}else if（this.navIsFixed&&window.pageYOffset | | | document.documentElement.scrollTop | | | | document.body.scrollTop<10）{this.navIsFixed=false；}scrollToTop（）{（函数smoothscroll（）{var currentScroll=document.documentElement.scrollTop | | document.body.scrollTop{
window.requestAnimationFrame（平滑滚动）；
滚动到（0，currentScroll-（currentScroll/5））；
}
})();
}
}
将此参数注入构造函数：
@Inject（DOCUMENT）private DOCUMENT:DOCUMENT

然后，调用
scrollIntoView
函数：

this.document.body.scrollIntoView({
   block: 'start',
   behavior: 'smooth'
});

准备好了！！：）
 
document.body.scrollTop=0应该工作，不管怎样，错误是什么？它没有给出错误。但是它在chromecan中不起作用。你能在plunker上制造你的问题吗？你能至少告诉我们你是如何绑定事件的，你的页面有多长吗？让ele=document.querySelector（'.informationBdrCmpt'）作为HtmleElement；元素滚动顶部（0）；它不起作用。任何帮助。。。。。。获取错误，因为[ts]无法调用其类型缺少调用签名的表达式。类型“Number”没有兼容的呼叫签名。从@angular/platform browser导入似乎不受欢迎，建议改为从@angular/common导入。这似乎不起作用。没有错误，只是没有响应，使用Angular 4/CLI。对我来说，它在Angular 2中确实可以工作（即使没有注入文档）。刚刚更新到Angular 5.0.3并尝试了上述解决方案，但对我来说，它不起作用。编辑：刚刚意识到这与Chrome的一些更新有关。它在Safari中运行良好，在Chrome中不起作用，无论是Angular2（它以前工作过的地方）还是Angular5。如果您使用Angular CLI使用第二个答案，它对meThis有效这是我的首选答案，但请记住，如果组件中的
scrollTop
的值没有变化，您将不会看到任何情况发生。例如，如果您在组件中将默认值设置为0，则滚动页面，然后在单击按钮或其他操作后将其设置为0。您是对的，不需要。移除它。谢谢。那很好）谢谢。我认为确保这样的代码片段的质量是很好的。在IDE中，这些东西很快就能被发现，所以我需要习惯在这里发现这些东西。