web-dev-qa-db-fra.com

Scroll Top dans angular2

Je travaille sur une application Web angular2 pour laquelle j'ai besoin d'aide dans les domaines suivants ... .. Ma page est composée de plusieurs composants. Je souhaite faire défiler le haut de la page lorsque l'utilisateur clique sur un bouton. J'ai essayé document.body.scrollTop = 0; mais cela ne fonctionne pas dans Chrome. J'ai essayé document.documentElement.scrollTop = 0; window.scrollTo (0, 0); mais ne fonctionne pas

javascriptangulartypescriptangular2-routing
11
Vinodh Ram

importer comme ça,

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

Dans votre constructeur, ajoutez ceci,

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

Ensuite, vous pouvez définir le défilement n'importe où comme ça,

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

J'ai résolu mon problème de défilement angulaire à l'aide de la liaison de données:

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

avec les styles:

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

Dans app.component.ts

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

Dans 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

Je propose d'écrire une directive pour cela. Assurez-vous de l'importer dans le module que vous utilisez.

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

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

et l'utiliser comme ci-dessous

<button scrollToTop>Scroll to Top</button>

Envisagez également d'ajouter le préfixe à la directive conformément aux meilleures pratiques angulaires.

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

2
Viktor Soroka

Il suffit d'utiliser:

window.scroll(0, 0);
2
JanP

Veuillez utiliser le code ci-dessous. Pour mon cas 

this.document.body.scrollTop = 0

ne fonctionne pas mais 

this.document.documentElement.scrollTop = 0

travail. Donc, peut être une dépendance du navigateur.

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

Si ce n'est pas un défilement de fenêtre, mais simplement div avec son propre parchemin, cela devrait fonctionner:

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

Ajoutez-le au constructeur:

constructor(private winRef: WindowRef) {}

Et dans le code, où vous voulez le mettre, ajoutez simplement cette ligne:

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

Bien sûr, vous pouvez également utiliser d'autres sélecteurs tels que: getElementByTagName, getElementById, getElementByName ...

0
anja

code HTML :

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

code css:

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

}
0
Rajesh Valluru