时间戳

首页 > 解决方案 > 滚动后如何使我的滚动到顶部按钮出现

javascript - 滚动后如何使我的滚动到顶部按钮出现

问题描述

我的滚动到顶部按钮工作得非常好，但我希望该按钮仅在向下滚动约 20 像素后出现。我以为我的 javascript 代码是问题，但在网上搜索后，我找到了相同的代码，但它仍然无法正常工作。相反，滚动 20 像素后，该按钮仅在我刷新时出现。我仍然不知道问题出在哪里，但我认为这是因为我使用的是 PHP 模型视图控制器 (MVC) 框架，因为我创建了一个测试 Html 文件并在那里尝试了相同的代码并且它有效。代码如下：

var scrollTop = document.getElementById("scrollTop");

window.onscroll = function(){
    scrollfunction()
};
function scrollfunction(){

    if( document.body.scrollTop > 20 || document.documentElement.scrollTop > 20){
        scrollTop.style.display = "block";
    } else {
        scrollTop.style.display = "none";
    }
}

scrollTop.addEventListener("click", function(){
    window.scrollTo({
        left: 0,
        top: 0,
        behavior: "smooth"
    })
})
/*Scroll to top button*/
#scrollTop{
    font-size: 380%;
    right: 30px;
    bottom: 30px;
    width: 5%;
    height: 10%;
    text-align: center;
    position: fixed;
    border: 1px solid rgb(0, 0, 255);
    background-color: rgb(183, 183, 255);
    color: rgb(0, 0, 255);
    cursor: pointer;
    transition: 0.5s;
    text-decoration: none;
}
#scrollTop:hover{
    background-color: rgb(123, 123, 255);
    transition: 0.5s;
}
#scrollTop:active{
    background-color: rgb(0, 0, 148);
}
 <p>Some default text</p>
 <p>Some default text</p>
 <p>Some default text</p>
 <p>Some default text</p>
 <p>Some default text</p>
 <p>Some default text</p>
 <p>Some default text</p>
 <p>Some default text</p>
 <p>Some default text</p>
 <p>Some default text</p>
 <p>Some default text</p>
 <p>Some default text</p>
 <p>Some default text</p>
 <p>Some default text</p>
 <p>Some default text</p>
 <p>Some default text</p>
 <p>Some default text</p>
 <p>Some default text</p>
 <p>Some default text</p>

<button id="scrollTop">
           <i class="fas fa-arrow-up"></i>
</button>

标签： javascripthtmlcss

解决方案

只需将默认值添加display:none到您的滚动顶部按钮，因此默认情况下它是隐藏的

您的其余代码看起来不错

var scrollTop = document.getElementById("scrollTop");

window.onscroll = function(){
    scrollfunction()
};
function scrollfunction(){

    if( document.body.scrollTop > 20 || document.documentElement.scrollTop > 20){
        scrollTop.style.display = "block";
    } else {
        scrollTop.style.display = "none";
    }
}

scrollTop.addEventListener("click", function(){
    window.scrollTo({
        left: 0,
        top: 0,
        behavior: "smooth"
    })
})
.content{
height:2000px;
}

/*Scroll to top button*/
#scrollTop{
    display:none;
    font-size: 380%;
    right: 30px;
    bottom: 30px;
    width: 5%;
    height: 10%;
    text-align: center;
    position: fixed;
    border: 1px solid rgb(0, 0, 255);
    background-color: rgb(183, 183, 255);
    color: rgb(0, 0, 255);
    cursor: pointer;
    transition: 0.5s;
    text-decoration: none;
}
#scrollTop:hover{
    background-color: rgb(123, 123, 255);
    transition: 0.5s;
}
#scrollTop:active{
    background-color: rgb(0, 0, 148);
}
<body>
  <div class="content">
  </div>
</body>

<button id="scrollTop">
           <i class=""></i>
</button>

推荐阅读