添加滾動到頂部按鈕（Ionic 2 |手稿）

Question

大家好，我正在嘗試添加「滾動到頂部按鈕」。執行以下操作：

1.用戶向下滾動時顯示按鈕。 2.當用戶向上滾動時隱藏按鈕。 3.如果點擊該按鈕，然後滾動到頂部並隱藏按鈕。 任何建議如何使其正確的方式？

非常感謝

Answer 1

Plunker Demo

爲了使這項工作，你需要：

• 創建滾動您scroll-content元素頂端
• 軌道滾動的scroll-content位置的功能
• 使用*ngIf滾動到頂部按鈕在scroll-content已達到一定的門檻後有條件顯示。

滾動到頂部功能

我適於this SO answer應用到scroll-content元件

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); 

軌道scroll-content位置

這個例子使用了窗高爲閾值用於顯示滾動頂部按鈕像這樣：

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

按鈕的Html

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

全部組分打字稿

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 https://stackoverflow.com/a/24559613/5357459 
    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); 
    } 

} 

全部組分的Html

<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> 

Answer 2

簡化scrollToTop()從adriancarriger

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

@Component({...}) 
export class MyPage{ 
    @ViewChild(Content) content: Content; 

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

來源：http://ionicframework.com/docs/v2/api/components/content/Content/

Answer 3

隨着adriancarriger代碼的幫助下，我嘗試以下，以Div元素設置爲頂部和它的工作。 下面是我的代碼

的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 
     }); 
} 

Answer 4

你可以試試這個。希望這有助於

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

import { Content } from 'ionic-angular'; 

@Component({...}) 

export class MyPage{ 

    @ViewChild(Content) content: Content; 

    scrollToTop() { 

    this.content.scrollToTop(); 
    } 

} 

Answer 5

當u有一個組件內的組件，你可能獲得內部組件內部的內容中的問題。這就是說我必須得到上面的元素並調用滾動。

在我的情況是當下一張幻燈片時，我不得不在下一張幻燈片的頂部。

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