添加滚动到顶部按钮（Ionic 2 | Typescript）

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

提问by David

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

大家好，我正在尝试添加“滚动到顶部按钮”。实现以下内容：

1.Show the button when user has scrolled down. 2.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?

1.当用户向下滚动时显示按钮。2.当用户向上滚动时隐藏按钮。3.如果点击按钮，则滚动到顶部并隐藏按钮。关于如何正确使用的任何建议？

thanks a lot

多谢

采纳答案by adriancarriger

Plunker Demo

Plunker 演示

To make this work you need to:

要完成这项工作，您需要：

• Create a function that scrolls your scroll-contentelement to the top
• Track the scroll position of scroll-content
• Use *ngIfon your scroll to top button to conditionally show after scroll-contenthas reached a certain threshold.

• 创建一个将scroll-content元素滚动到顶部的函数
• 跟踪滚动位置 scroll-content
• 使用*ngIf滚动到顶部按钮在scroll-content达到某个阈值后有条件地显示。

Scroll to top function

滚动到顶部功能

I adapted this SO answerto apply to the scroll-contentelement

我改编了这个 SO 答案以适用于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);

Track scroll-contentposition

轨道scroll-content位置

This example uses the window height as the threshold for showing the scroll to top button like this:

此示例使用窗口高度作为显示滚动到顶部按钮的阈值，如下所示：

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

Button Html

按钮 Html

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

Full component Typescript

完整组件打字稿

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

}

Full component Html

完整的组件 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>

回答by José Nicodemos Maia Neto

Simplifying the scrollToTop()from adriancarriger

简化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();
  }
}

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

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

回答by jagadeesh

You could try this. Hoping it helps

你可以试试这个。希望有帮助

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

import { Content } from 'ionic-angular';

@Component({...})

export class MyPage{

  @ViewChild(Content) content: Content;

  scrollToTop() {

    this.content.scrollToTop();
  }

}

回答by mariomol

When u have a component inside a component, you might have problems getting the Content inside the inner component. That said i had to get the upper element and call to scroll.

当您在组件内有一个组件时，您可能会在获取内部组件内的内容时遇到问题。也就是说，我必须获取上层元素并调用滚动。

In my case was when going 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); 

回答by Savitha

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

在 adriancarriger 代码的帮助下，我尝试了以下将 Div 元素设置为 Top 并且它起作用了。下面是我的代码

Html

html

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

app.component.ts

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