您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

Mr.Xiong使用jQuery实现回到顶部的效果

使用jQuery实现回到顶部的效果

  1. 首先我们还是先来给页面先布局:我们只需要先给一个div标签,然后再div标签中再放一个img标签,img标签里的 src:的入境就导入图片的入境就好了,这张图片是用来做我们的背景图,接着再在div标签外放一个button标签作为按钮,同样的和div标签一样,在button标签中也放一个img标签,src:的入境也是一张图片的入境,这张图片是表示点击这张图片后要回到顶部的意思,布局完成
  2. 然后我们再来给div标签和button按钮标签来设置样式,我们先给div设置一下样式,只需要给div标签设置一个文本居中:text-align:center就行了,然后再来给button设置样式:position:fixed,bottom:50%,right:5%,cursor:pointerdisplay:none,给button按钮标签设置这几个就好了,这里给button标签设置position定位的属性值为fixed是要让button标签里的图片固定在某个位置,给他设置bottom和right的属性值的单位为百分比,通常都是用px像素,这里看你个人的喜好,我们这里还给button标签设置了cursor和display,cursor是为了让鼠标移到图片上鼠标会变成手的图标,而display:none是让图片隐藏,因为后面写jQuery会让button里的图片进行一个显示和隐藏的切换操作
  3. 又到了最后一个环节,接下来就是要去实现我们button里图片的显示和隐藏的切换以及点击button按钮里的图片我们的滚动条会回到顶部和背景图回到顶部,而且不是像刷新页面一样直接回到页面顶部,是让滚动条和背景图由快到慢的回到页面顶部

  1. 接下来我们就开始去写jQuery,首先我们需要把页面的可视高度/文档根节点的可视高度获取到,并且赋值给一个变量,var cHeight = document.documentElement.clientHeight,还需要把回到顶部的按钮获取到并且赋值给一个声明的变量,var btn = $(button,接着还有声明一个全局变量为time以及声明一个变量来接收记录滚动条滚动事件,var isScroll = true
  2. 然后再给window绑定滚动条事件,$(window).scroll(function(){}),还需要通过documentElement.scrolltop或者body.scrolltop来获取到滚动条垂直方向的距离并赋值给变量stop,然后可以在控制台输出stop再去页面上滚动鼠标滚轮看看控制台有没有输出数据,之后我们再通过if语句来比较stopcHeight的大小,如果stop>cHeight,我们就给button按钮设置display属性的属性值为block,让button标签里的图片显示,反之stop<cHeight,我们就设置display属性的属性值为none,让图片隐藏起来,还有当滚轮滚动或者滚动条滑动时,isScroll = false并且把定时器清除掉
  3. 再获取到button按钮并绑定点击事件,在点击事件中写一个定时器time=setinterval(function(){}),再在定时器中写如果垂直方向的距离等于,那么就清除定时器time,然后再跳出if语句,接着再声明一个变量来接收图片每次运动的距离,var iSpeed = Math.floor(-stop/6),然后再让stop加上iSpeed就得到了新的垂直方向的距离,然后再让滚轮滚动事件为真,isScroll=true,再设置这个定时器每10毫秒运行一次这个函数
  4. 最后再去页面加载事件中写,还是获取到垂直方向的距离,把他赋值给变量top,因为-ISpeed/6一直运行下去还是会有余数的,所以再通过if语句判断top是否为null,那肯定不为null了,那就在if语句里面再添加一个一次性定时器,1毫秒后运行这个函数,然后在函数中写让垂直方向的距离等于,这样滚动条就会回到顶部啦

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进