使用jQuery回到顶部

最新推荐文章于 2023-06-13 10:37:33 发布

原创最新推荐文章于 2023-06-13 10:37:33 发布 · 677 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #css #html5

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

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