利用滚动事件onscroll,当页面被卷去的头部(window.pageYOfset)大于某个值时,就让侧边栏定位为固定定位fixed,否则就还是绝对定位;
// 滚动事件 onscroll
document.addEventListener('scroll', function () {
// 页面被卷去的头部:window.pageYOfset
if (window.pageYOfset >= bannertop) {
goBack.style.position = 'fixed';
} else {
goBack.style.position = 'absolute';
}
})
点击返回顶部,就是让向上滚动的距离变为0;调用提前封装好的animate函数,代码如下:
// 当点击返回顶部,就让窗口滚动到页面最上方
goBack.addEventListener('click', function () {
animate(window, 0); //
});
动画函数
function animate(obj, target, callback) { //callback接收回调函数
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 步长计算公式:(目标位置 - 现在的位置) / 10;
var step = (target - window.pageYOfset) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step); // Math.ceil()向上取整,Math.floor()向下取整,避免达不到目标位置
if (window.pageYOfset == target) {
// 停止动画,就是停止定时器
clearInterval(obj.timer);
// 回调函数写在定时器停止的时候
// if (callback) { //如果有回调函数传进来
// callback(); //调用回调函数
// }
callback && callback(); //都真才执行回调函数callback(),若前面为假,后面不会执行
}
window.scroll(0, window.pageYOfset + step); //offset只能获取,不能赋值;style能赋值
}, 20)
}