html 往下滚动时右上角出现滚动浮动按钮点击可以滚动到顶部往上滚动就不显示这个按钮
这个效果可以通过CSS和JavaScript实现。
首先,在页面的CSS中定义一个ID为"scroll-button"的样式,使它在右上角固定位置,并设置它的display属性为none,这样在页面一开始加载时它就不会显示出来。
#scroll-button {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
cursor: pointer;
}
接下来,需要用JavaScript来监听页面滚动事件。当页面滚动到一定位置时,显示"scroll-button"按钮,否则隐藏它。
window.onscroll = function() {
var scrollButton = document.getElementById('scroll-button');
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollButton.style.display = 'block';
} else {
scrollButton.style.display = 'none';
}
};
最后,在页面HTML中添加一个"scroll-button"按钮,并给它一个点击事件,当点击时将页面滚动到顶部。
<a id="scroll-button" onclick="topFunction()" title="Go to top">↑</a>
<script>
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
这样,当用户向下滚动页面时,"scroll-button"按钮会在页面滚动到一定位置时显示出来,用户可以点击它来回到页面顶部。而当用户向上滚动页面时,这个按钮会自动隐藏。
原文地址: https://www.cveoy.top/t/topic/b0Xb 著作权归作者所有。请勿转载和采集!