1

My angular (6) code is set up so I have a section (We'll call this pageOne) on the bottom of the page that is tied to an ngIf. I want there to be a button on the top of the page, that when pressed displays pageOne by making it true, and then automatically scrolls to the bottom of the page.

I am able to get it to be true and display no problem, the only issue I'm having is getting it to scroll to the new section. Pressing the button once displays the content, and I have to press it again to get it to scroll down. I'm hoping to achieve this all on 1 click. I don't believe it's a time issue, I think it doesn't see the content on the page till the second click. Not sure though. 

<button (click)='onDisplayContent()'>Start</button>

<div *ngIf="pageOne">
...
</div>

onDisplayContent() {
  this.pageOne = true;
  this.pageThree = true;

  this.scrollDown();
}

scrollDown() {
  window.scrollTo(0, document.body.scrollHeight);
}
Manish Balodia
  • 1,863
  • 2
  • 23
  • 37
Ryan
  • 11
  • 1
  • Take a look at [this answer](https://stackoverflow.com/a/53124292/1009922). It works with `*ngIf` as it does for `*ngFor`. – ConnorsFan Jun 06 '19 at 02:22
  • The whole breaks when I switch to ngFor – Ryan Jun 06 '19 at 02:25
  • Sorry for not being clear. You can keep `*ngIf` and use the technique shown in [the linked answer](https://stackoverflow.com/a/53124292/1009922). It was posted for a question about `*ngFor` but it works with `*ngIf` as well. – ConnorsFan Jun 06 '19 at 02:28
  • You were clear, I just read wrong, sorry about that! My code editor isn't too happy with this.. https://imgur.com/l1kJBW5 – Ryan Jun 06 '19 at 02:53
  • [This other answer](https://stackoverflow.com/a/51567261/1009922) shows the classes that you need to import. – ConnorsFan Jun 06 '19 at 03:00
  • @Ryan Please take a look at this solution : https://stackoverflow.com/questions/46658522/how-to-smooth-scroll-to-page-anchor-in-angular-4-without-plugins-properly/51400379#51400379 – Joel Joseph Jun 06 '19 at 04:50
  • @Ryan or just relplace `*ngIf` with `[hidden]="!pageOne"`. this make sure that the element is present in the dom when you are initiating the scroll – Joel Joseph Jun 06 '19 at 04:52
  • Maybe putting a setTimeout could work – Thanveer Shah Jun 06 '19 at 06:52
  • Hey @JoelJoseph doing the hidden trick is leaving me with the same issue, it has to be pressed twice to scroll – Ryan Jun 07 '19 at 00:41

0 Answers0