Как плавно прокрутить страницу вверх - Angular 7 - PullRequest
Новая
       42

Как плавно прокрутить страницу вверх - Angular 7

0 голосов
/ 26 апреля 2019

Это должно быть просто, но со вчерашнего дня я пытаюсь плавно прокрутить страницу вверх.Функция прокрутки работает, но не плавная прокрутка.

Я попробовал: scrollIntoView({behavior: 'smooth'}), но это не работает.

Это мой HTML-компонент 

        <div *ngIf="displayNoneOnBtn" [hidden]="!displayNoneOnBtn"  id="btnTest" class="shadow d-flex flex-column align-items-center justify-content-center">
            <ng-container *ngIf="!disableBtn">
                <i class="material-icons arrow-up-button" (click)="scrollTopWindow()">keyboard_arrow_up</i>
            </ng-container>
            <ng-container *ngIf="disableBtn">
                <i class="material-icons arrow-down-button" (click)="scrollDown()">keyboard_arrow_down</i>
            </ng-container>
        </div>

И мой компонент TS 

    import {Component, OnInit, ElementRef} from '@angular/core';
import 'hammerjs';
import { SessionService, UiService } from 'src/app/core/services';

@Component({
    templateUrl: './frontend.component.html',
    styleUrls: ['./frontend.component.scss'],
})

export class FrontendComponent implements OnInit {
    top: number;
    disableBtn = true;
    scrollHeight: number;
    displayNoneOnBtn = true;

    constructor(
        public sessionService: SessionService,
        public uiService: UiService,
        private el: ElementRef,
    ) {
    }

    scrollClass: any;

    ngOnInit(): void {
        this.scrollClass = Array.prototype.slice.call(this.el.nativeElement.getElementsByClassName('pageScroll'), 0)[0];
        console.log('scroll scrollTop', this.scrollClass.scrollTop);
        console.log('scroll scrollHeight', this.scrollClass.scrollHeight);
        console.log('scroll offsetHeight', this.scrollClass.offsetHeight);
    }

    asideNavToogle(status: string) {
        this.uiService.stateAsideNav = status;
    }

    scrollDown() {
        this.scrollClass.scrollTop = this.scrollClass.scrollHeight;
    }

    scrollTopWindow() {
        this.scrollClass.scrollTop = 0;
        this.el.nativeElement.scrollIntoView({behavior: 'smooth'});
    }

    onScroll (event: Event) {
        console.log('scroll scrollTop', this.scrollClass.scrollTop);
        console.log('scroll scrollHeight', this.scrollClass.scrollHeight);
        console.log('scroll offsetHeight', this.scrollClass.offsetHeight);
        if (this.scrollClass.scrollTop === 0) {
            this.disableBtn = true;
        }
        if (this.scrollClass.scrollHeight === this.scrollClass.scrollTop + this.scrollClass.offsetHeight) {
            this.disableBtn = false;
        }
        if (this.scrollClass.scrollHeight === this.scrollClass.offsetHeight) {
            this.displayNoneOnBtn = false ;
        }

    }

}

Ответы [ 2 ]

1 голос
/ 26 апреля 2019

Я сделал пример ниже:

https://stackblitz.com/edit/angular-vjsz9w

Надеюсь, я помог.

0 голосов
/ 26 апреля 2019

Я решил проблему с помощью функции Jquery: 

    scrollDown() {
        $('.pageScroll').animate({
            scrollTop: this.scrollClass.scrollHeight
        }, 500);
    }

    scrollTop() {
        $('.pageScroll').animate({
            scrollTop: 0
        }, 500);
    }
...