<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
height: 5000px;
}
.slider-bar {
position: absolute;
right: 0;
width: 100px;
height: 150px;
top: 600px;
border: black solid 1px;
background-color: #e64942;
float: right;
}
.banner {
height: 1000px;
background-color: pink;
}
.a {
height: 500px;
background-color: #6db8ff;
}
.main {
height: 3000px;
background-color: skyblue;
}
.goback {
/*display: none;*/
position: absolute;
right: 0px;
width: 100px;
height: 150px;
top: 2000px;
background-color: #6db8ff;
}
</style>
</head>
<body>
<div class="slider-bar">
<span></span>
</div>
<div class="a"></div>
<div class="goback">返回头部</div>
<div class="banner">头部区域</div>
<div class="main">main部分</div>
</body>
<!--//需要用到滚动事件scroll,因为是页面滚动,所以事件源是document-->
<!--//滚动到某个位置,就是判断页面被卷去的上部值-->
<!--//页面被卷去的头部:可以通过window.pageTOffset获得 如果是被卷去的左侧 window.pageXOffset-->
<!--//注意:元素被卷去的头部是element.scrollTop,如果页面被卷去的头部则是window.pageYOffset-->
<script>
//1.获取元素
var sliderbar = document.querySelector('.slider-bar');
var banner = document.querySelector('.banner');
var main = document.querySelector('.main');
//banner.offsetTop是被卷去头部的大小
var bannerTop = banner.offsetTop;
var mainTop = main.offsetTop;
var goback = document.querySelector('.goback');
// console.log(bannerTop)
//侧边栏固定后的数值
var sliderbarTop = sliderbar.offsetTop - bannerTop;
var gobackTop = goback.offsetTop - mainTop;
//2.页面滚动事件
document.addEventListener('scroll', function () {
console.log(window.pageYOffset); //页面被卷去的距离
//3.当页面被卷去的头部大于等于某值,侧边栏改为固定方位
if (window.pageYOffset >= bannerTop) {
sliderbar.style.position = 'fixed';
sliderbar.style.top = sliderbarTop + 'px';
} else {
sliderbar.style.position = 'absolute';
sliderbar.style.top = '600px';
}
if (window.pageYOffset >= mainTop) {
goback.style.display = 'block';
goback.style.position = 'fixed';
goback.style.top = gobackTop + 'px';
} else {
goback.style.display = 'none';
goback.style.position = 'absolute';
goback.style.top = '2000px';
}
})
//当我们点击了返回顶部模块,就让窗口滚动到页面最上方
goback.addEventListener('click', function () {
animate(window,0);
})
function animate(obj, target, callback) {
//调用时callback()
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 缓动动画公式:(目标值-现在的位置) / 10
// 把步长值改为整数,避免出现没有到达target,需要往上取整
var step=(target-window.pageYOffset)/10;
step = step>=0?Math.ceil(step):Math.floor(step);
if (window.pageYOffset == target) {
//停止
clearInterval(obj.timer);
//回调函数写到定时器结束
if (callback){
callback();
}
}
//把每次加一这个步长值改为一个慢慢变小的值
// obj.style.left = window.pageYOffset + step + 'px';
window.scroll(0,window.pageYOffset + step)
}, 15);
}
</script>
</html>
js 实现点击按钮页面滚动到顶部其他位置
最新推荐文章于 2024-07-05 10:20:02 发布