<style>
.box1{
width: 1200px;
height: 800px;
background-color: pink;
margin: 0 auto;
}
.box2{
width: 1200px;
height: 800px;
background-color:palegreen;
margin: 0 auto;
}
/* 设置了box1 box2的高度都为800px 是为了页面出现滚动条 */
.gotop {
position: fixed;
bottom: 50px;
right: 5px;
width: 70px;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
background-color: aquamarine;
}
/* gotop去顶部 固定定位 定在底部 */
.nav {
width: 1200px;
height: 30px;
background-color: yellow;
position: fixed;
top: 0;
left: 50%;
transform: translate(-50%);
display: none;
}
/* nav头部的导航栏 固定定位 同时让它隐藏 */
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="gotop">回到顶部</div>
<div class="nav"></div>
</body>
<script>
//实现回到顶部效果
var oGo = document.querySelector(".gotop");//获取去顶部的元素
var timer = null;//把定时器置为空
oGo.onclick = function () {//点击事件
clearInterval(timer);//清除定时器
timer = setInterval(function () {
document.documentElement.scrollTop -= 10;//滚动条每次距离顶部的距离减10
var oSt = document.documentElement.scrollTop;//获取滚动条距离顶部的距离
console.log(oSt);
if (oSt === 0) {
clearInterval(timer);//如果距离顶部距离为0 清除定时器
}
}, 20);
}
//实现吸顶效果
window.onscroll = function () {//滚动监听事件
var oNav = document.querySelector(".nav");//获取导航nav里元素
var oSt = document.documentElement.scrollTop;//获取滚动条距离顶部的距离
if (oSt >= 100) {
oNav.style.display = "block";//如果滚动条距离顶部的距离大于100 显示导航nav
} else {
oNav.style.display = "none";//否则不显示
}
}
</script>Ideas:
1. Volver arriba
1. Es necesario que aparezca una barra de desplazamiento (establezca la altura del cuadro1 y del cuadro2 en 800 px, o puede configurar solo un cuadro, establezca la altura un poco más grande y aparecerá la barra de desplazamiento).
2. Vuelva a la configuración de posicionamiento fijo en la parte superior (use la posición fija para configurar en la parte inferior).
3. Configure el evento de clic al hacer clic (haga clic en la parte superior para activar el evento).
4. Configurar el temporizador puede cambiar la distancia desde la parte superior de la barra de desplazamiento (es necesario juzgar, si la distancia desde la parte superior es 0, el temporizador debe borrarse; de lo contrario, se llamará todo el tiempo y ocupará memoria) .
2. Efecto techo
1. Utilice la ventana de eventos de monitoreo de desplazamiento.onscroll.
2. Configure un cuadro de navegación, corrija el posicionamiento y ocultelo al mismo tiempo.
3. Obtenga la distancia desde la barra de desplazamiento hasta la parte superior y luego juzgue. Si la distancia entre la barra de desplazamiento y la parte superior es mayor que 100, se mostrará la navegación; de lo contrario, se ocultará y no se mostrará (la altura aquí puede configurarla usted mismo).
puntos de conocimiento importantes
1.window.onscroll detecta el evento de desplazamiento de la barra de desplazamiento.
2.document.documentElement.scrollTop||document.body.scrollTop obtiene la distancia de desplazamiento vertical. Esta forma de escribir es compatible con Firefox y Google Chrome.