2020-10-27 15:25:26
浏览数 (2)
.案例：返回顶部
- 带有动画的返回顶部
- 此时可以继续使用我们封装的动画函数
- 只需要把所有的left 相关的值改为 跟 页面垂直滚动距离相关就可以了
- 页面滚动了多少，可以通过 window.pageYOffset 得到
- 最后是页面滚动，使用 window.scroll(x,y)
代码语言：javascript
复制<script>
// 1. 获取元素
var sliderbar = document.querySelector(".slider-bar");
var banner = document.querySelector(".banner");
// console.log(banner.offsetTop);
// banner.offsetTop 就是被卷进去的头部大小
var bannerTop = banner.offsetTop;
// 当我们侧边栏固定定位之后应该是变化的数值
var sliderbarsTop = sliderbar.offsetTop - bannerTop;
// 获取main主体
var main = document.querySelector(".main");
var goBack = document.querySelector(".goBack");
var mainTop = main.offsetTop;
// 2. 页面滚动元素
document.addEventListener("scroll", function () {
// console.log(11);
// console.log(window.pageYOffset);
// 当我们页面被卷去的头部大于等于171 此时 侧边栏就要改为固定定位
if (window.pageYOffset >= banner.offsetTop) {
sliderbar.style.position = "fixed";
sliderbar.style.top = sliderbarsTop "px";
} else {
sliderbar.style.position = "absolute";
sliderbar.style.top = "300px";
}
if (window.pageYOffset >= main.offsetTop) {
goBack.style.display = "block";
} else {
goBack.style.display = "none";
}
});
// 3. 当我们点击返回顶部模块，就让窗口滚动到页面的最上方
goBack.addEventListener("click", function () {
// 里面的x 和 y 不跟单位的 直接写数字即可
// window.scroll(0,0)
// 因为是窗口滚动 所以对象是window
animate(window, 0);
});
// 动画函数
function animate(obj, target, callback) {
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.times);
obj.times = setInterval(function () {
// 步长值写道定时器的里面
// 把我们步长改为整数 不要出现小数
// var sept = Math.ceil((target - obj.offsetLeft) / 10); 因为有前进和后退 所以要用判断条件
var sept = (target - window.pageYOffset) / 10;
sept = sept > 0 ? Math.ceil(sept) : Math.floor(sept);
if (obj.window.pageYOffset == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.times);
if (callback) {
callback();
}
}
// 把每次加 1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10
// obj.style.left = obj.offsetLeft sept "px";
window.scroll(0, window.pageYOffset sept);
}, 15);
}
</script>
