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

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

单击按钮时，我设法滚动到顶部

.ts

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

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

您可以尝试在事件或ionScroll事件ionScrollStart内容。

在 html 中，

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

在组件中，

showScrollButton(){
  this.showButton=true;
}

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>

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

谢谢

相关内容

最新更新

热门标签：