仿淘宝返回顶部案例
时间:2022-07-28
本文章向大家介绍仿淘宝返回顶部案例,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
.案例:返回顶部
- 带有动画的返回顶部
- 此时可以继续使用我们封装的动画函数
- 只需要把所有的left 相关的值改为 跟 页面垂直滚动距离相关就可以了
- 页面滚动了多少,可以通过 window.pageYOffset 得到
- 最后是页面滚动,使用 window.scroll(x,y)
<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>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python笔记
- JavaScript 技术篇-chrome利用ClipboardEvent写入剪切板,没成功的你就差一步
- 搭建一个高可用负载均衡的集群架构(第三部分)
- C语言学习笔记
- JavaScript 技术篇-js获取窗口标题名,获取页面URL地址
- Pyhon海龟绘制木叶村徽章
- MIT大神写给女神的Q版Python画图库—Cutecharts【技术创作101训练营】
- JavaScript 技术篇-js创建dom节点,并设置属性
- 容器中的数据管理
- Java基础 方法
- Python 技术篇-pyperclip库实现读取写入剪切板,超简单
- 基于consul的Docker-overlay跨多宿主机容器网络
- Python 微信机器人-向指定名称的好友发送微信消息
- JavaScript技术篇-js提升网页视频播放速率,提高慕课网视频播放速度
- 使用docker五步搭建ELK日志收集分析系统