|
写了一个简单的监听滚动条事件
描述
鼠标滚动到一定距离，点击回到顶部按钮就会出现，初始状态是 隐藏的，下面开代码
// html 部分
我是首页面
回到顶部
// css 样式部分
body {
background-color: antiquewhite;
height: 3000px;
}
.arrow {
/* 字体排列模式 */
writing-mode: vertical-lr;
position: fixed;
top: 50%;
right: 5px;
/* letter-spacing 字体垂直排列的时候 用这个属性 设置字体之间的间距 */
letter-spacing: 3px;
color: blue;
display: none;
}
.arrow:hover {
/* 鼠标悬停变成小手 */
cursor: pointer;
}
// js 部分
window.onload = () => {
const arrow = document.querySelector('.arrow')
// 给window加监听事件
window.addEventListener('scroll', () => {
// document.documentElement.scrollTop //获取滚动条的位置
let scroll = document.documentElement.scrollTop
console.log(document.documentElement.scrollTop)
if (scroll > 500) {
// scroll>500 显示回到顶部按钮
arrow.style.display = "block"
} else {
// scroll |