Very simple question, how can I scroll to a class in angular, searched for hours to make this work, so frustating
I have a calendar ponent, and when I click a day, the events for that day open underneath

Works with pure javascript for an id, but not class

 const elmnt = document.getElementById('scrollto');
 elmnt.scrollIntoView(true);

I also have jQuery available but this is not scrolling at all

 if ($('.call-open').length > 0) {
      $('html, body').animate({
        scrollTop: $('.call-open').offset().top
      }, 2000);
    }

this .call-open class get's added after I click the day, maybe that's why

I tried this plugin but it doesn't do anything, even with a simple example button

I can't be the only one with this problem, yet I can't find any working solution, sometines angular is a pain in the ass for simple things like this

Very simple question, how can I scroll to a class in angular, searched for hours to make this work, so frustating
I have a calendar ponent, and when I click a day, the events for that day open underneath

Works with pure javascript for an id, but not class

 const elmnt = document.getElementById('scrollto');
 elmnt.scrollIntoView(true);

I also have jQuery available but this is not scrolling at all

 if ($('.call-open').length > 0) {
      $('html, body').animate({
        scrollTop: $('.call-open').offset().top
      }, 2000);
    }

this .call-open class get's added after I click the day, maybe that's why

I tried this plugin but it doesn't do anything, even with a simple example button

I can't be the only one with this problem, yet I can't find any working solution, sometines angular is a pain in the ass for simple things like this

• javascript
• jquery
• angular
• typescript
• scroll

• Sounds like a timing issue if the elements are added or classes are set after the click event. Introduce a small delay using setTimeout() before calling your code as a test. – Brandon Taylor Commented Apr 25, 2018 at 14:01
• this can help you stackoverflow./a/49875416/4399281 – Fateh Mohamed Commented Apr 25, 2018 at 14:02
• @FatehMohamed this is for routing – Ruben Commented Apr 25, 2018 at 15:53

3 Answers 3

try this with timeout

scroll(){
 setTimeout(() => {
    const classElement = document.getElementsByClassName('scrollTo');
    if(classElement.length > 0){
      classElement[0].scrollIntoView();
    }
 }
 }, 100);
}

I solved this problem using the following code:

  constructor(private el: ElementRef) { }

  scrollToFirstInvalidControl() {
    const firstInvalidControl: HTMLElement = this.el.nativeElement.querySelector(
      "class-name"
    );
    if (!firstInvalidControl) return false
    window.scroll({
      top: this.getTopOffset(firstInvalidControl),
      left: 0,
      behavior: "smooth"
    });
  }

  getTopOffset(controlEl: HTMLElement): number {
    const labelOffset = 50;
    return controlEl.getBoundingClientRect().top + window.scrollY - labelOffset;
  }

this works, but damn it's ugly

 window.setTimeout(() => {
  if ($('.cal-open').length > 0) {
    $('html, body').animate({
      scrollTop: $('.cal-open').offset().top - 80
    }, 100);
  }
}, (250));