Angular - Button Scroll to Top

Question

I developed an image gallery. Is there a way when scrolling on the page, a button would appear to me that when clicking on it all the scroll made was to the top (beginning of the page)?

I already tested some cases that I found and so far none worked :( can someone help me?

BLITZ

code

  <ul class="mdc-image-list my-image-list" style="padding-left: 10px;padding-right: 10px;">
    <li class="mdc-image-list__item" *ngFor="let product of Images; let  j = index;">
      <div class="mdc-image-list__image-aspect-container">
          <img [src]="product.image" class="mdc-image-list__image">
      </div>
    </li>
  </ul>

Chellappan வ · Accepted Answer · 2020-01-26 14:22:19Z

11

Use hostListener to listen window scroll event,Then Use angular ViewPortScroller service, which provide scrollToPostion method use that to scroll to specified position.

Try this:

component.ts

@HostListener('window:scroll', ['$event']) onScroll(event){
    this.pageYoffset = window.pageYOffset;
 }

constructor(private scroll: ViewportScroller) { }

scrollToTop(){
    this.scroll.scrollToPosition([0,0]);
}

Working Example

answered Jan 26, 2020 at 14:22

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - Button Scroll to Top

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related