Javascript 如何在滚动后显示“我的滚动到顶部”按钮

我的scroll to top（滚动到顶部）按钮工作正常，但我希望该按钮仅在向下滚动约20px后才显示。我认为我的javascript代码是问题所在，但在网上搜索后，我找到了相同的代码，但仍然无法工作。相反，在滚动20px后，该按钮仅在我刷新时出现。我仍然不知道问题出在哪里，但我认为这是因为我使用了一个PHP模型-视图-控制器（MVC）框架，因为我创建了一个测试Html文件，并在那里尝试了相同的代码，结果成功了。代码如下：

var scrollTop=document.getElementById（“scrollTop”）；
window.onscroll=函数（）{
scrollfunction（）
};
函数滚动函数（）{
if（document.body.scrollTop>20 | | document.documentElement.scrollTop>20）{
scrollTop.style.display=“block”；
}否则{
scrollTop.style.display=“无”；
}
}
scrollTop.addEventListener（“单击”，函数（）{
window.scrollTo({
左:0,，
排名：0，
行为：“平稳”
})
})

/*滚动至顶部按钮*/
#卷轴{
字号：380%；
右：30px；
底部：30px；
宽度：5%；
身高：10%；
文本对齐：居中；
位置：固定；
边框：1px实心rgb（0,0,255）；
背景色：rgb（183183255）；
颜色：rgb（0,0,255）；
光标：指针；
过渡：0.5s；
文字装饰：无；
}
#滚动顶部：悬停{
背景色：rgb（123、123、255）；
过渡：0.5s；
}
#scrollTop：活动{
背景色：rgb（0,0,148）；
}

一些默认文本

一些默认文本

一些默认文本

一些默认文本

一些默认文本

一些默认文本

一些默认文本

一些默认文本

一些默认文本

一些默认文本

一些默认文本

一些默认文本

一些默认文本

一些默认文本

一些默认文本

一些默认文本

一些默认文本

一些默认文本

一些默认文本

只需将默认的

显示：无

添加到您的scrolltop按钮，因此默认情况下它是隐藏的

剩下的代码看起来不错

var scrollTop=document.getElementById（“scrollTop”）；
window.onscroll=函数（）{
scrollfunction（）
};
函数滚动函数（）{
if（document.body.scrollTop>20 | | document.documentElement.scrollTop>20）{
scrollTop.style.display=“block”；
}否则{
scrollTop.style.display=“无”；
}
}
scrollTop.addEventListener（“单击”，函数（）{
window.scrollTo({
左:0,，
排名：0，
行为：“平稳”
})
})

.content{
高度：2000px；
}
/*滚动到顶部按钮*/
#卷轴{
显示：无；
字号：380%；
右：30px；
底部：30px；
宽度：5%；
身高：10%；
文本对齐：居中；
位置：固定；
边框：1px实心rgb（0,0,255）；
背景色：rgb（183183255）；
颜色：rgb（0,0,255）；
光标：指针；
过渡：0.5s；
文字装饰：无；
}
#滚动顶部：悬停{
背景色：rgb（123、123、255）；
过渡：0.5s；
}
#scrollTop：活动{
背景色：rgb（0,0,148）；
}

我建议您使用@hoseininjast-当问题中没有提到jQuery时，为什么您会建议使用jQuery插件？我的意思是，仅仅为了显示一个按钮而安装一个臃肿的库和一个额外的插件似乎有点过分。仅供参考-我删除了

PHP

-标记，因为这个问题与此无关。我只是忘记了将默认显示设为“无”，这就是解决方案。谢谢