web-dev-qa-db-ger.com

Scrollen Sie Top in angle2

Ich arbeite an der Webapplikation angle2, wo ich Hilfe zu folgenden Themen brauche ..__: Meine Seite besteht aus mehreren Komponenten. Ich möchte oben auf der Seite scrollen, wenn der Benutzer auf eine Schaltfläche klickt. Ich habe document.body.scrollTop = 0; ausprobiert, aber dies funktioniert nicht in Chrome. Ich habe document.documentElement.scrollTop = 0 versucht; window.scrollTo (0, 0); aber nicht funktioniert

11
Vinodh Ram

so importieren,

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

Fügen Sie in Ihrem Konstruktor Folgendes hinzu:

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

Dann können Sie die Schriftrolle überall so einstellen,

this.document.body.scrollTop = 0;
17
jaseelmp

Ich habe das Problem des Winkelscrollings mithilfe der Datenbindung gelöst:

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

mit den Styles:

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

In app.component.ts

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

In app.component.html

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

Ich schlage vor, eine Richtlinie dafür zu schreiben. Stellen Sie sicher, dass Sie es in das von Ihnen verwendete Modul importieren.

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

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

und benutze es wie unten

<button scrollToTop>Scroll to Top</button>

Erwägen Sie auch, der Richtlinie das Präfix gemäß den bewährten Methoden von Angular hinzuzufügen.

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

2
Viktor Soroka

Benutz einfach:

window.scroll(0, 0);
2
JanP

Bitte verwenden Sie den folgenden Code. Für meinen Fall 

this.document.body.scrollTop = 0

funktioniert aber nicht 

this.document.documentElement.scrollTop = 0

arbeiten. Es kann also eine Abhängigkeit vom Browser geben.

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

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

Wenn es sich nicht um Fensterblättern handelt, sondern nur mit seiner eigenen Bildlaufleiste div, so sollte dies funktionieren:

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;
  }
}

Fügen Sie es dem Konstruktor hinzu:

constructor(private winRef: WindowRef) {}

Und in den Code, wo Sie es einfügen möchten, fügen Sie einfach diese Zeile hinzu:

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

Natürlich können Sie auch andere Selektoren wie: getElementByTagName, getElementById, getElementByName ... verwenden.

0
anja

hTML Quelltext :

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

cSS-Code:

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

ts code:

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 [email protected]';
  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));
          }
      })();
  }

}
0
Rajesh Valluru

Fügen Sie dieses Argument in Ihren Konstruktor ein: @Inject(DOCUMENT) private document: Document

Rufen Sie dann die Funktion scrollIntoView auf:

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

Bereit!! :)

0
anlijudavid