这就是我将按钮包含在正文中的方式:
<?php require_once('scrollToTop.php'); ?>
这是我的滚动 tTo Top.php 文件:
<div class="btnScrollToTop" data-scroll="up" type="button">
<img src="images/paudie_scroll_top_icon.jpg" alt="">
这是按钮的 CSS:
.btnScrollToTop {
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
width: 50px;
border: none;
z-index: 99;
}
这是我的 js 文件,包含在 php 页脚中:
<script src="js/scroll.js"></script>
// JavaScript Document
const btnScrollToTop = document.querySelector(".btnScrollToTop");
btnScrollToTop.addEventListener("click", function() {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth"
});
});
经过各种尝试后,我无法让按钮仅出现在用户从页面顶部滚动 20px 的地方。
请帮忙。
最佳答案
要执行您需要的操作,您可以检索当前窗口滚动位置,检查它是否高于 20 并使用它来切换按钮的显示
状态:
const btnScrollToTop = document.querySelector(".btnScrollToTop");
// scroll to top of page when button clicked
btnScrollToTop.addEventListener("click", e => {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth"
});
});
// toggle 'scroll to top' based on scroll position
window.addEventListener('scroll', e => {
btnScrollToTop.style.display = window.scrollY > 20 ? 'block' : 'none';
});
h3 {
margin: 0 0 1000px;
}
.btnScrollToTop {
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
border: none;
z-index: 99;
display: none;
}
<h3>Scroll down...</h3>
<div class="btnScrollToTop" data-scroll="up" type="button">
<img src="images/paudie_scroll_top_icon.jpg" alt="Scroll to top" />
</div>
关于javascript - 如何让滚动后出现滚动到顶部按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68861926/