使用jQuery回到顶部

本文介绍了如何使用jQuery实现简单的页面布局,包含一个图片和一个按钮。通过CSS设置了div和按钮的样式,按钮的背景图片只显示一半,鼠标悬停时切换显示。接着讲解了jQuery部分,包括引入jQuery库,监听滚动事件,根据滚动条位置控制按钮的显示与隐藏,以及点击按钮时平滑滚动页面的实现。文章最后展示了实际效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

  1. 我们这个的布局很简单,只需要一张图片和一个按钮。
  2. 我们将图片放在一个类名为div1div里面,我们给这个div一些样式:width:1200px; margin:0 auto;
  3. 我们再在div外面放一个button按钮,我们给这个按钮写一下样式:width: 40px; height: 40px; right:35px; bottom:20px; display:none; background-image: url('../../Content/images/top_bg.png'); background-position: 0px -40px; border:none; position:fixed;我们给这个button按钮的背景放一张图片,让这张图片只显示一半,并将按钮固定,再当我们的鼠标移动到上面时将显示的一半隐藏,再将隐藏的一半显示。
  4. 我们写完了简单的布局就开始写jQuery部分。
  5. 我们先引入jQuery插件,然后再声明两个全局变量,scrolltime,将true赋值给变量scroll,而time先不给他赋值。
  6. 我们再写一个滚动条事件window.onscroll=function () {},然后再声明一个变量top,将滚动条距离上面的距离赋值给他var top = document.documentElement.scrollTop || document.body.scrollTop;
  7. 再声明一个变量height,将元素返回的可见高度赋值给他var height = document.documentElement.clientHeight; clientHeight返回元素的可见高度。
  8. if语句来判断变量top是否大于变量height的值,如果大于就给button按钮设置样式为显示,否则将其隐藏。
  9. 再用一个if语句判断一下变量scroll是否为false,如果是就将下面用到的定时器清除clearInterval(time);
  10. 最后再让变量scroll的值赋值为false
  11. 我们再给button按钮绑定点击事件,将定时器赋值给变量time,我们用的是无限定时器,它里面有两个参数,一个是匿名函数,另一个是时间,我们先写第一个参数,里面我们声明一个变量top,和上面一样这个变量是获取滚动条垂直上方的距离的,然后我们用if语句判断一下变量top是否为0,如果是就清除这个定时器,并且返回,如果不是就来执行下面的代码。
  12. 声明一个变量speed,我们将计算后的结果赋值给他,Math.floor(-top / 6);,这句代码表示将变量 top取负数再除于六,然后用Math对象里面的floor方法将其向下取整。
  13. 我们设置匹配元素相对滚动条顶部的偏移,将变量top与变量speed的和赋值给他,最后再将变量scroll的值赋值为true
  14. 第二个参数我们设置为100毫秒,这表示每个100毫秒调用一下这个函数。
  15. 效果如下:

 

 

 

  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值