b站pink老师JavaScript的PC端网页特效 案例代码——仿淘宝返回顶部(带有动画的返回顶部)
目标效果:
在之前写好的
的代码基础上
实现点击返回顶部字样,即可用缓动动画返回顶部【见代码段中4.和动画函数部分】
重点语法:
滚动窗口至文档中的特定位置
window.scroll(x,y)
x,y不写单位
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.slider-bar {position: absolute;left: 50%;top: 300px;margin-left: 600px;width: 45px;height: 130px;background-color: pink;}.w {width: 1200px;margin: 10px auto;}.header {height: 150px;background-color: purple;}.banner {height: 250px;background-color: skyblue;}.main {height: 1000px;background-color: yellowgreen;}span {display: none;/* 最开始goBack设置的是隐藏 */position: absolute;bottom: 0;}</style>
</head><body><div class="slider-bar"><span class="goBack">返回顶部</span></div><div class="header w">头部区域</div><div class="banner w">banner区域</div><div class="main w">主体部分</div><script>//1.获取元素var sliderbar = document.querySelector('.slider-bar');var banner = document.querySelector('.banner');var main = document.querySelector('.main');var goBack = document.querySelector('.goBack');//element.offsetTop如果该元素 没有父亲/父亲没有定位,则返回 距离body上方的偏移量(返回值无单位)//banner以上到body的距离// console.log(banner.offsetTop);var bannerTop = banner.offsetTop;//console.log(sliderbar.offsetTop);var sliderbarTop = sliderbar.offsetTop - bannerTop;var mainTop = main.offsetTop;//2.页面滚动事件//因为是页面滚动,所以事件源是documentdocument.addEventListener('scroll', function () {//获取页面被卷去的头部// console.log(window.pageYOffset);// 3 .当页面被卷去的头部大于等于了 bannerTop时 侧边栏sliderbar就要改为固定定位if (window.pageYOffset >= bannerTop) {sliderbar.style.position = 'fixed';sliderbar.style.top = sliderbarTop + 'px';} else {//恢复为之前的绝对定位sliderbar.style.position = 'absolute';//恢复为之前的top值sliderbar.style.top = '300px';}// 3 .当页面滚动到main盒子,就显示 goback模块if (window.pageYOffset >= mainTop) {goBack.style.display = 'block';} else {goBack.style.display = 'none';}})// 4.当点击返回顶部模块,就让窗口滚动到页面最上方goBack.addEventListener('click', function () {// 因为是窗口滚动,所以对象是window// 由于要滚到最顶端,y坐标是0animate(window, 0); //调用函数})// 动画函数// 将之前写好的animate.js缓动动画函数复制过来,将其中left相关都改为垂直相关function animate(obj, target, callback) {//先清除之前的定时器,只保留当前的一个定时器clearInterval(obj.timer);obj.timer = setInterval(function () {// 1.步长值写在定时器里面 步长值=(目标值-现在的位置)/10// window.pageYoffset返回整个页面被卷去的头部的距离var step = Math.ceil(target - window.pageYOffset) / 10;//判断步长的正负// 如果步长为正,往大里取整 Math.ceil// 如果步长为负,往小里取整 Math.floorstep = step > 0 ? Math.ceil(step) : Math.floor(step);// 2.当盒子位置=目标位置,停止定时器if (window.pageYOffset == target) {//用停止定时器的方式 停止动画clearInterval(obj.timer);// 如果有回调函数,调用回调函数if (callback) {callback();}}// 3.把之前每次加1,改为一个慢慢变小的步长值 步长值=(目标值-现在的位置)/10//window.scroll(x,y) 滚动窗口至文档中特定位置 x,y不要加单位window.scroll(0, window.pageYOffset + step)}, 15)}</script>
</body></html>
b站pink老师JavaScript的PC端网页特效 案例代码——仿淘宝返回顶部(带有动画的返回顶部)相关推荐
- b站pink老师JavaScript的PC端网页特效 案例代码——仿淘宝固定侧边栏
目标效果: 1.当页面滚动到banner区域的顶部碰到页面顶部时,右边的侧边栏sliderbar,由之前距离页面顶部300px的固定定位,变为 侧边栏sliderbar距离页面顶部的距离=页面滚 ...
- b站pink老师JavaScript的PC端网页特效 案例代码——仿京东放大镜效果
目录 原理讲解: 代码段: 1. detail.html部分(重点在标红区) 2. detail.js部分(全部都是重点) 3. detail.css部分(重点在标红区) 4. base.css部分( ...
- 【重点案例】b站pink老师JavaScript的PC端网页特效 案例代码——网页轮播图
目录 代码段: 1.index.js部分(全是重点) 2.animate.js部分(重点,是之前封装好的动画函数) 3.index.html部分(重点在标红区) 4.index.css部分(重点在标红 ...
- b站pink老师JavaScript的PC端网页特效 案例代码——筋斗云案例
目标效果: 1.最开始的时候cloud筋斗云处于最左边 2.当鼠标经过(mouseenter 不冒泡)对应li,cloud筋斗云就移到那个li(lis[i].offsetLeft获得li相对有定位的父 ...
- PC端网页特效二:mouseenter 和 mouseover 的区别、动画函数封装
目录 5.mouseenter 和 mouseover 的区别 6.动画函数封装 动画实现原理 简单动画函数封装 动画函数给不同元素记录不同定时器 缓动效果原理 动画函数多个目标值之间移动 缓动函 ...
- JavaScript知识点整理(十六)- PC端网页特效 - 案例练习
目录 一.带动画返回顶部 二.菜单栏跟随鼠标案例 一.带动画返回顶部 案例分析: 可采用之前封装的函数动画animate.js 需将animate.js内left相关的值修改为和垂直滚动距离相关就可以 ...
- JavaScript—— PC 端网页特效
目录 一.PC 端网页特效 1. 元素偏移量 offest 系列 1.1 offset 概述 1.2 offset 与 style 区别 案例:获取鼠标在盒子内的坐标 案例:模拟框拖拽 html cs ...
- javaScript PC端网页特效
PC端网页特效 1. 元素偏移量 offset 系列 1.1 offset 概述 1.2 offset 与 style 区别 2. 元素可视区 client 系列 2.1 立即执行函数 2.2 loa ...
- JavaScript(五)-- PC 端网页特效
目录 1. 元素偏移量 offset 系列 1.1 offset 概述 1.2 offset 与 style 区别 案例:获取鼠标在盒子内的坐标 案例分析 案例:模态框拖拽 案例分析 案例:仿京东放大 ...
最新文章
- Apache(httpd)配置--用户认证,域名跳转和访问日志配置
- python数字类型-Python数字类型及其操作
- php mysql 登录注销_laravel 实现用户登录注销并限制功能
- 【Android 组件化】路由组件 ( 构造路由表中的路由信息 )
- 徒手撸了个markdown笔记平台
- 一个java类运行时从哪个方法开始_Java的应用程序是从类中的
- python安装scipy出现红字_windows下安装numpy,scipy遇到的问题总结
- python exe enter退出,Python程序退出处理程序(atexit)
- Java进阶:SpringMVC中使用fileupload报错Error creating bean with name ‘multipartResolver‘
- 区块链 Hyperledger fabric 排序服务Kafka
- 微信小程序云开发教程-WXSS入门-样式的使用
- 新建raw data 分区
- MarkDown 标题居中
- Android 百度离线地图下载完后调用下载好的离线包
- IPV6邻居发现协议(NDP)
- Kubernetes集群安装 gatekeeper
- Flex富文本编辑器
- 怀念—伤心者,不痛不痒,冷暖自知
- 再见,Java 8!Java 17 发布,堪称史上最快的 JDK
- VVC参考软件的下载安装
热门文章
- 读鸟哥Linux私房菜知识点总结(20170712)
- Hackintosh Asus z97 impact ( EFI OpenCore-0.5.9)
- Android架构 - MVC、MVP、MVVM、MVI
- Wireshark数据包分析Alpha-1.pcapng
- linux 下usb驱动开发,LINUX_ARM下的USB驱动开发.pdf
- php 生成图片并压缩保存到本地或者输出到网页imagejpeg方法
- webapp没有蓝点
- 诺基亚收购奇趣为哪般?
- java 二进制转十进制的算法_java中十进制数转换二进制数
- 企业邮箱登陆入口是哪个,企业邮箱账号格式及登陆入口讲解