How can i add ScrollToTop Button to my slides?


#1

I have an ionic slide pages and i want to add scroll button. I tried everything but it’s not working. Can you please help me?
Sorry for bad language.


#2

You want to scroll to a specific slider right ?
As example you have 4 Sliderpages.

Here is what you can do:

TS

changeToSlide(idx) {
	this.slides.slideTo(idx, 500);
}

goToLastSlider() {
        this.changeToSlide(3);
}

Here you just add your Button and it will bring you to the last Page.
HTML
<div (click)="this.changeToSlide(3)"></div>

Please be aware of being more specific about your problem when you ask a question, its much easier for someone to help you out with your problem! :grin::rabbit2:


#3

hey @cherry thanks for your answer.
I could not explain the problem well enough. I have a long list in the slide and i want to add ScrollToTop button to this list. Like this one

I hope you can understand me. :slight_smile: Again sorry for bad language. :smiley:

Edit: By the way, i followed this link and etc. But they didn’t work.


#4

Alright now I understand what you want.
If you want to use the scroll to top button only, forget the other 2 buttons its just easier to understand with more examples.

HTML
<ion-button (click)="scrollToTop()">TOP</ion-button>

If you don’t need those ignore them!
<ion-button (click)="scrollToBottom()">BOTTOM</ion-button>
<ion-button (click)="scrollToPosition()">POSITION</ion-button>

TS

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

export class YOUR PAGE{
  @ViewChild(Content) content: Content;


    scrollToTop() {
      this.content.scrollToTop();
    }
//If you don't need those ignore them!
    scrollToBottom() {
      this.content.scrollToBottom();
    }
    scrollToPosition() {
      this.content.scrollTo(0, 300, 200);
    }

}

Basicly what you are doing at the scrollToPosition you indicate the x, y axis and time. Click me for more info.

Also what would be interesting for you is this.

    scrollToTop() {
      this.content.scrollToTop(200);
    }

200 stands for the time if you want it slower or faster just increase or decrease the number!

Just read the documentation its full of great examples of what you can do with scroll content! :relaxed::bird:


#5

This works inside a ion-slide? I’ve followed this and not works.

To enable scroll on ion-slide I put the

ion-slide{
overflow: scroll !important;
}

thanks


#6

yes that’s works perfectly.
.html file
<button ion-fab (tap)="scrollToTop()"> <ion-icon name="md-arrow-round-up"></ion-icon> </button>

.ts file

 @ViewChild(Content) content: Content;
  count: number = 0;

  scrollToTop() {
    this.count++;
    try {
      if (this.count < 2) {
        setTimeout(() => {
          this.content.scrollToTop();
          this.count = 0;
        }, 300);
      }
    } catch (error) {
    }
  }

#7

In my case this code not works.

The ion-slide component disables by default the scroll content. To enable it I have this css code:

ion-slide{
overflow: auto;!important;
}

Because of that I think that the ion content not have scroll, the ion-slide have the scroll.

Do you solved the scroll problem of the ion slide by other way?


#8

Hi,

Adding

ion-slides {
height: auto!important;
}

Solves the problem