Add a scroll to top button (Ionic 2 | Typescript)

**davidla** · July 12, 2016, 1:10pm

Hi everyone i am trying to add “scroll to top button.” that implement the following :

Show the button when user has scrolled down.
Hide the button when the user scrolls up.
3 .If the button is tapped then scroll to the top and hide the button .

any suggestion for how make it right way?

thanks a lot

**itlr** · July 13, 2016, 4:19pm

I didn’t try myself, but the APIs you need resides in ion-content compoent

github.com

ionic-team/ionic/blob/master/src/components/content/content.ts

import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, NgZone, OnDestroy, Optional, Output, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';

import { App } from '../app/app';
import { Config } from '../../config/config';
import { DomController } from '../../platform/dom-controller';
import { Img } from '../img/img-interface';
import { Ion } from '../ion';
import { isTabs } from '../../navigation/nav-util';
import { assert, isTrueProperty, removeArrayItem } from '../../util/util';
import { Keyboard } from '../../platform/keyboard';
import { NavController } from '../../navigation/nav-controller';
import { Content as IContent, Tabs } from '../../navigation/nav-interfaces';
import { Platform } from '../../platform/platform';
import { ScrollEvent, ScrollView } from '../../util/scroll-view';
import { ViewController } from '../../navigation/view-controller';

export { ScrollEvent } from '../../util/scroll-view';


export class EventEmitterProxy<T> extends EventEmitter<T> {

This file has been truncated. show original

github.com

ionic-team/ionic/blob/master/src/components/content/content.ts

import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, NgZone, OnDestroy, Optional, Output, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';

import { App } from '../app/app';
import { Config } from '../../config/config';
import { DomController } from '../../platform/dom-controller';
import { Img } from '../img/img-interface';
import { Ion } from '../ion';
import { isTabs } from '../../navigation/nav-util';
import { assert, isTrueProperty, removeArrayItem } from '../../util/util';
import { Keyboard } from '../../platform/keyboard';
import { NavController } from '../../navigation/nav-controller';
import { Content as IContent, Tabs } from '../../navigation/nav-interfaces';
import { Platform } from '../../platform/platform';
import { ScrollEvent, ScrollView } from '../../util/scroll-view';
import { ViewController } from '../../navigation/view-controller';

export { ScrollEvent } from '../../util/scroll-view';


export class EventEmitterProxy<T> extends EventEmitter<T> {

This file has been truncated. show original

etc…