Question

我正在开发angular2 web应用程序，我需要以下帮助。我的页面由多个组件组成。我想在用户点击按钮时滚动页面顶部。我试过了 document.body.scrollTop = 0;但这不适用于Chrome。我试过document.documentElement.scrollTop = 0; window.scrollTo（0,0）;但没有工作

Answer 1

像这样导入，

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

在你的构造函数中添加这个，

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

然后你可以像这样设置滚动，

this.document.body.scrollTop = 0;

Answer 2

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

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

带有样式：

.container {
  height: 100%;
  scroll: auto;
  position: relative;
}

Answer 3

在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>

Answer 4

只需使用：

window.scroll(0, 0);

Answer 5

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

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>

还要考虑根据Angular最佳实践为指令添加前缀。

https://angular.io/guide/styleguide#directive-custom-prefix

Answer 6

请使用以下代码。就我而言

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;

Answer 7

如果它不是窗口滚动，而只是用自己的滚动div，这应该有效：

Gloabal service WindowRef：

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 ......

Answer 8

html代码：

df6.withWatermark("event_time", "0 seconds")
  .writeStream
  .trigger(Trigger.ProcessingTime("0 seconds"))
  .queryName("query_db")
  .format("parquet")
  .option("checkpointLocation", "/path/to/checkpoint")
  .option("path", "/path/to/output")
  //      .outputMode("complete")
  .start()

css代码：

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

ts代码：

.scroll-to-top {
    position: fixed;
    bottom: 15px;
    right: 15px;
    opacity: 0;
    transition: all .2s ease-in-out;
}

.show-scroll {
    opacity: 1;
    transition: all .2s ease-in-out;
}

Answer 9

将此参数注入到您的构造函数中：@Inject(DOCUMENT) private document: Document

然后，调用scrollIntoView函数：

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

准备好了！！：）

在angular2中滚动顶部

9 个答案: