添加一个按钮以滚动到顶部答案

【问题标题】：Adding a button to scroll to top添加一个按钮以滚动到顶部
【发布时间】：2017-06-15 05:28:06
【问题描述】：

我正在尝试检测用户何时向下滚动...并在单击时显示一个滚动到顶部的按钮我没有创建指令，我发现它很难理解所以我使用Content

当按钮被点击时，我已经设法滚动到顶部

.ts

scrollToTop(){
var distance = this.content.scrollTop;

if (distance > 0){
 this.content.scrollToTop();
 } 
}

但我不知道如何显示和隐藏按钮....目前它显示在构造函数this.showButton = true; 我想在scrollTop 更改时显示按钮

【问题讨论】：

标签： angular ionic2

【解决方案1】：

您可以尝试使用Content ionScrollStart 事件或ionScroll 事件。

在html中，

<ion-content (ionScrollStart)="showScrollButton()">

在组件中，

showScrollButton(){
  this.showButton=true;
}

【讨论】：

它没有成功....但我已经解决了这个问题.. ``` ngOnInit(){ this.ionScroll = this.myElement.nativeElement.getElementsByClassName('scroll-content') [0]； this.ionScroll.addEventListener('scroll', () => { if (this.ionScroll.scrollTop > 0) { this.showButton = true; } else { this.showButton = false; } }); } ```

【解决方案2】：

const scrollTop = function (){
        const scroll_btn = document.querySelector('#scrollbtn');

            const rootElement = document.documentElement;
            const TOGGLE_RATIO = 0.80;

            function handleScroll() {
            // do something on scroll
            const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight
                
                if ((rootElement.scrollTop / scrollTotal) > TOGGLE_RATIO) {
                //show button
                scroll_btn.classList.add("showBtn")
                
            } else {
                //hide button
                scroll_btn.classList.remove("showBtn")
                

        }
    }
    scroll_btn.addEventListener("click", scrollToTop)

            function scrollToTop() {
            //scroll to top logic
            rootElement.scrollTo({
                top: 0,
                behavior: "smooth"
                })
            }
    
    document.addEventListener("scroll", handleScroll)
                
};

scrollTop();

html{
    background: yellow;
    block-size: 200vh;
    }
.scrollbtn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 4rem;
    color: var(--important);
    background-color: var(--main-color);
    font-weight: 600;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    border-radius: 50%;
    font-size: 1.5rem;
    z-index: 1000;
    opacity: 0;
    
}

.scrollbtn:hover{
    background-color: rgb(3, 141, 139);
    /*hanges the color of the button on hover*/
}

#scrollbtn.showBtn{
  /*toogles the button on js condition being true*/
    opacity: 1;
    transition: opacity 1s, transform 1s;
}

<html>
  <h1>This is an H1 tag </h1>
  <button class="scrollbtn" id="scrollbtn" title="Scroll to top">Top</button>
</html>

我希望这能回答你的问题。

谢谢

【讨论】：