Geek Answers Handbook

Add scroll to top button (Ionic 2 | Typescript)

Hi everyone, I'm trying to add a "scroll to the top button". which implement the following:

1.See the button as the user scrolls down. 2.Press the button when the user scrolls up. 3. If the button is pressed, scroll up and hide the button. any suggestion on how to make the right path?

Many thanks

+6
source share
5 answers

Plunger Demo

To do this, you need to:

  • Create a function that scrolls the scroll-content element to the beginning
  • Track scroll position scroll-content
  • Use *ngIf on your scroll button upwards to conditionally show that after scroll-content reached a certain threshold.

Go to the top function

I adapted this SO answer to apply to the scroll-content element

 scrollToTop(scrollDuration) { let scrollStep = -this.ionScroll.scrollTop / (scrollDuration / 15); let scrollInterval = setInterval( () => { if ( this.ionScroll.scrollTop != 0 ) { this.ionScroll.scrollTop = this.ionScroll.scrollTop + scrollStep; } else { clearInterval(scrollInterval); } }, 15);

Track scroll-content position

This example uses window height as a threshold to show scrolling to the top button, for example:

 this.ionScroll.addEventListener("scroll", () => { if (this.ionScroll.scrollTop > window.innerHeight) { this.showButton = true; } else { this.showButton = false; } });

Html button

 <button *ngIf="showButton" (click)="scrollToTop(1000)">Scroll Top</button>

Full Typescript Component

 import { NavController } from 'ionic-angular/index'; import { Component, OnInit, ElementRef } from "@angular/core"; @Component({ templateUrl:"home.html" }) export class HomePage implements OnInit { public ionScroll; public showButton = false; public contentData = []; constructor(public myElement: ElementRef) {} ngOnInit() { // Ionic scroll element this.ionScroll = this.myElement.nativeElement.children[1].firstChild; // On scroll function this.ionScroll.addEventListener("scroll", () => { if (this.ionScroll.scrollTop > window.innerHeight) { this.showButton = true; } else { this.showButton = false; } }); // Content data for (let i = 0; i < 301; i++) { this.contentData.push(i); } } // Scroll to top function // Adapted from /questions/2392/scrolltop-animation-without-jquery/25616#25616 scrollToTop(scrollDuration) { let scrollStep = -this.ionScroll.scrollTop / (scrollDuration / 15); let scrollInterval = setInterval( () => { if ( this.ionScroll.scrollTop != 0 ) { this.ionScroll.scrollTop = this.ionScroll.scrollTop + scrollStep; } else { clearInterval(scrollInterval); } }, 15); } }

Full Html Component

 <ion-navbar primary *navbar> <ion-title> Ionic 2 </ion-title> <button *ngIf="showButton" (click)="scrollToTop(1000)">Scroll Top</button> </ion-navbar> <ion-content class="has-header" #testElement> <div padding style="text-align: center;"> <h1>Ionic 2 Test</h1> <div *ngFor="let item of contentData"> test content-{{item}} </div> </div> </ion-content>
+6
source

Simplification scrollToTop() by adriancarriger

 import { Component, ViewChild } from '@angular/core'; import { Content } from 'ionic-angular'; @Component({...}) export class MyPage{ @ViewChild(Content) content: Content; scrollToTop() { this.content.scrollToTop(); } }

Source: http://ionicframework.com/docs/v2/api/components/content/Content/

+6
source

You can try this. Hoping this helps

 import { Component, ViewChild } from '@angular/core'; import { Content } from 'ionic-angular'; @Component({...}) export class MyPage{ @ViewChild(Content) content: Content; scrollToTop() { this.content.scrollToTop(); } }
+1
source

Using adriancarriger code, I tried the following to set the Div element to Top, and it worked. Below is my code

Html

 <div #Innholdtext > <p> add your contents here to set scroll top </> </div>

app.component.ts

 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; export class app implements OnInit { @ViewChild('Innholdtext') private hovedInnhold : ElementRef; private scrollElement; } ngOnInit() { this.scrollElement = this.hovedInnhold.nativeElement; this.scrollElement.addEventListener("click", () =>{ this.hovedInnhold.nativeElement.scrollTop = 0 }); }
0
source

If a component has a component inside the component, you may have problems getting the content inside the internal component. This said that I had to get the top element and call the scroll.

In my case, when moving to the next slide, I had to be on top for the next slide.

  const element = document.querySelector(".slide-zoom"); setTimeout(() => { if(element) element.scrollIntoView(true) }, 200);
0
source

More articles:


All Articles