在jquery中 ， 可以使用scroll()方法 ， 通过if判断 ， 实现回到顶部的功能 。 下面小编举例讲解jquery返回顶部功能如何实现 。
文章插图
需要这些哦
html+jquery
代码编纂器：z studio 10.0
方式/
1新建一个html文件 ， 定名为test.html ， 用于讲解jquery返回顶部功能若何实现 。
文章插图
2在test.html文件内 ， 利用a标签建立一个回到顶部的链接 ， 并设置其id属性为btn 。
文章插图
3在css标签内 ， 经由过程id给a标签设置样式 ， 界说其位置为页面右下解 。
文章插图
4【jquery返回顶部功能如何实现】在js标签中 ， 利用ready()方式在页面加载完当作时 ， 经由过程hide()方式将a标签埋没 。
文章插图
5在js标签中 ， 再经由过程scroll()方式 ， 经由过程if判定 ， 当滚动条的位置处于距顶部50像素以下时 ， 跳转链接呈现（fadeIn） ， 不然消逝(fadeOut) 。 当点击跳转链接后 ， 将scrollTop设置为0 ， 回到页面顶部位置 。
文章插图
6在浏览器打开test.html文件 ， 点击回到顶部 ， 查看实现的结果 。
文章插图
总结：11、利用a标签建立一个回到顶部的链接 。
2、在js标签中 ， 再经由过程scroll()方式 ， 经由过程if判定 ， 当滚动条的位置处于距顶部50像素以下时 ， 跳转链接呈现（fadeIn） ， 不然消逝(fadeOut) 。 当点击跳转链接后 ， 将scrollTop设置为0 ， 回到页面顶部位置 。
注重事项当用户滚动指定的元素时,会发生 scroll 事务 。
以上内容就是jquery返回顶部功能如何实现的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- 最美志愿者手抄报 最美志愿者画报
- jquery 动态绑定事件的方法
- jquery怎么把下拉框选中的值赋给文本框
- 高德地图怎么使用导航路线返回
- 家的手抄报 家的画报
- QQ消息一直在屏幕顶部显示提醒怎么样关闭
- jquery怎么获取span标签下第一个字符
- jquery点击一个按钮新增一个div怎么做
- jquery怎样实现点击按钮切换div
- 预防肺炎手抄报 预防肺炎画报