Ionic v5 滚动到顶部

Question

Current environment:
    Ionic CLI                     : 6.7.0
    Ionic Framework               : @ionic/angular 5.1.0
    @angular-devkit/build-angular : 0.803.26
    @angular-devkit/schematics    : 8.3.26
    @angular/cli                  : 8.3.26
    @ionic/angular-toolkit        : 2.2.0

The documentation for ionic v5 has left me clueless. I've yet to overcome the learning curve I suppose.

How can I create a scroll to top button with a floating action button? I've been on the Content Docs page to try and find the information I need. So I'm thinking that I need to get a reference to the content in the typescript file. I'm accustomed to JS and in that case it would be as simple as document.getElementById() ... Here not so much. A quick google search brings me to V3 Framework docs . It explicitly states To get a reference to the content component from a Page's logic, you can use Angular's @ViewChild annotation: Which is absolutely wonderful. Thank you. However I'm now on V5, not V3, and they are different enough that everything breaks.

So I'm like okay, maybe I'm just an idiot and can't do anything to save my life. Scrolls down to methods getScrollElement and scrollToTop Cooooool... I got nothing from this doc.

To summarize, I have two questions. How can I do this in v5, or could you show me to a doc that outlines it in a better way? Am I crazy? Maybe it's an angular problem and not an ionic problem.

Answer 1

This is an ionic challenge.

You have two options

1) Properly implement scroll to top using the standard ionic way as detailed in the framework documentation forum. I include that link for context, but this direct link out of the question may be more useful.

2) You can find your element and programmatically scroll it.

document.querySelector('app-your-component-name').querySelector('ion-content').scrollToTop();

NOTE: If you are capable of posting what you have tried so far, it would help in giving you a more accurate answer.