6

could you please tell me how to scroll the list to top on button click in angular ? I tried like this

 scrollToTop(el){
    el.scrollIntoView();
  }

  <button (click)="scrollToTop(target)">scroll to top</button>

It scroll the list to top .but it hide my addressbar and then user not able see header I think it is not a good solution .anybody have any other good solution

here is my code https://stackblitz.com/edit/angular-f9qxqh?file=src%2Fapp%2Fapp.component.html

naveen
  • 867
  • 4
  • 18
  • 42

3 Answers3

10

You can scroll to the top of the list by setting the scrollTop property of the container to zero. See this stackblitz for a demo.

<div #container class="container">
  <ul>
    <li *ngFor="let i of items">{{i}}</li>
  </ul>
</div>

<button (click)="container.scrollTop = 0">scroll to top</button>

Here is a simple method that scrolls smoothly to the top of the list. It is based on this answer by bryan60, and adapted to RxJS 6. You can try it in this stackblitz.

<button (click)="scrollToTop(container)">scroll to top</button>

import { interval as observableInterval } from "rxjs";
import { takeWhile, scan, tap } from "rxjs/operators";
...

scrollToTop(el) {
  const duration = 600;
  const interval = 5;
  const move = el.scrollTop * interval / duration;
  observableInterval(interval).pipe(
    scan((acc, curr) => acc - move, el.scrollTop),
    tap(position => el.scrollTop = position),
    takeWhile(val => val > 0)).subscribe();
}
ConnorsFan
  • 70,558
  • 13
  • 122
  • 146
  • example as we do in `jquery` to give `duration` to complete this task.currently it move quickly to top .can we give duration – naveen Jun 30 '18 at 02:05
  • 1
    Some code for smooth scrolling with pure Javascript can be found in [this post](https://gist.github.com/andjosh/6764939). – ConnorsFan Jun 30 '18 at 02:16
  • I added a method for smooth scrolling, based on Observables. – ConnorsFan Jun 30 '18 at 02:54
5

You add the scroll to your container, so it works on container not on ul

app.component.html

<div class="container" #container>
  <ul #target>
    <li *ngFor="let i of items">{{i}}</li>
  </ul>
</div>
<button (click)="scrollToTop(container)">scroll to top</button>

app.component.ts

scrollToTop(el) {
 el.scrollTop = 0;          
}

For smooth scrolling, use this :

scrollToTop(el) {
    var to = 0;
    var duration = 1000;
    var start = el.scrollTop,
        change = to - start,
        currentTime = 0,
        increment = 20;

    var easeInOutQuad = function(t, b, c, d) {
        t /= d / 2;
        if (t < 1) 
            return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
    }

    var animateScroll = function() {        
        currentTime += increment;
        var val = easeInOutQuad(currentTime, start, change, duration);

        el.scrollTop = val;
        if(currentTime < duration) {
            setTimeout(animateScroll, increment);
        }
    }
    animateScroll();    
}
Jagjeet Singh
  • 1,564
  • 1
  • 10
  • 23
0

Typescript

ngOnInit(): void {

const scroller = document.querySelector(".wrapper");
scroller?.addEventListener("scroll", (event) => {
  if(scroller?.scrollTop > 300){
    this.windowScrolled = true;
  } else{
    this.windowScrolled = false;
  }
}); 
}



scrollToTop(): void {
    document.getElementsByClassName('wrapper')[0].scrollTo(0,0);
  }

HTML

<p>
<a *ngIf="windowScrolled" class="topButton" (click)="scrollToTop()" title="Go to top">
  <i class="pi pi-angle-double-up"><i class="pi pi-angle-double-up"></i></i>
</a>

SCSS

.topButton{
    position: fixed;
    transition: all 0.2s ease-in-out;
    z-index: 1030;
    right: 30px;
    bottom: 50px;
    font-weight: bolder;
    cursor: pointer;
    background-color: #002266;
    color: white;
    width: 23px;
    height: 34px;
    text-align: center;
    vertical-align: middle;
    border-radius: 15px;
    padding: 3px;
}
MAQ
  • 95
  • 8