title: jQuery scrollTo() not working in angular 4
body: <p>I'm using a library called <a href="https://github.com/VadimDez/ng2-pdf-viewer" rel="nofollow noreferrer">ng2-pdf-viewer</a> for some reason the default way to stick to a page isn't working, so what I've done is I've used jQuerys <code>scrollTo()</code> method to scroll to the the <code>.page</code> class in the PDF so if I wanted the page to be scrolled to page 2 it would be page <code>.page:nth-child(2)</code> now I've got this working.. but only after you refresh the page and not when you first land on the page so If I follow a link to my pdf-view page it doesn't scroll but then when I refresh the page it does.. now I'm not sure if using jQuery scrollTo is the best method but its the only way I've been able to kind of get it to work</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;pdf-viewer [src]="pdfSrc"
            [render-text]="true"
            [autoresize]="true"
            [original-size]="false"
            style="display: block;" (after-load-complete)="callBackFn($event)"&gt;
  &lt;/pdf-viewer&gt;
  </code></pre>
  
  <p>COMPONENT.TS</p>
  
  <pre><code>import { Component, OnInit, Output, EventEmitter, AfterViewInit} from '@angular/core';
  import { AppConsts } from '@shared/AppConsts';
  import { AppComponentBase } from '@shared/common/app-component-base';
  import { ActivatedRoute } from '@angular/router';
  import { HeaderTitleService } from '@shared/service/headerTitle.service';
  
  
  declare var jQuery: any;
  const $ = jQuery;
  
  
  @Component({
    selector: 'app-pdfview',
    templateUrl: './pdfview.component.html',
    styleUrls: ['./pdfview.component.less']
  })
  
  
  
  export class PdfviewComponent implements OnInit {
  
  
  pdfSrc: string;
  pdf: string;
  pageNum: number = 2;
  botString: string;
  pageNumberVar: string;
  
  
  @Output() notify: EventEmitter&lt;String&gt; = new EventEmitter&lt;String&gt;();
  
  constructor(
     private route: ActivatedRoute,
     private headerTitleService: HeaderTitleService
  ) {
  this.pdf = route.snapshot.params['pdfId'];
    if (this.pdf === '1') {
        this.pdfSrc = '../../../assets/pdf/emeds1.pdf';
        this.botString = 'Admission Reconciliation loaded on Page 2 - matching the word ‘reconcile’ for you.';
        this.pageNumberVar = '2';
      } else if (this.pdf === '2') {
        this.pdfSrc = '../../../assets/pdf/medrec.pdf';
        this.botService.sendMessage('I have loaded the document on page 21 showing "Medication Reconciliation"');
        setTimeout(() =&gt; {
          this.botService.sendMessage('That saved you hours of reading :)'); 
         }, 2000);
        setTimeout(() =&gt; {
          $('html, body').animate({
            scrollTop: $('.page:nth-child(29)').offset().top
           }, 300);
         }, 1000);
      }
    }
  
  
    callBackFn(pdf: PDFDocumentProxy) {
    this.botService.sendMessage(this.botString);
    }
  
    ngAfterViewInit() {
      setTimeout(function(){
       $('html, body').animate({
        scrollTop: $('.page:nth-child(' + this.pageNumberVar + ')').offset().top
     }, 300);
     }, 1000);
     }
  }
  </code></pre>
  
  <p>as you can see above ive tried putting the scrollTo function in <code>ngAfterViewInit</code> but that didnt fix it either</p>