<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery返回顶部</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <style> .wrap { height: 2000px; } .red { background: red; height: 600px; } .green { background: green; height: 600px; } .yellow { background: yellow; height: 800px; } #back-top { position: fixed; width: 60px; height: 60px; bottom: 30px; right: 30px; background: #ccc; text-align: center; line-height: 60px; text-decoration: none; } </style> </head> <body> <div class="wrap"> <div class="red"> 测试 </div> <div class="green"> 测试 </div> <div class="yellow"> 测试 </div> </div> <a href="#" id="back-top">Top</a> <script> $(function() { //先将#back-top隐藏 $('#back-top').hide(); //当滚动条的垂直位置距顶部100像素一下时，跳转链接出现，否则消失 $(window).scroll(function() { if ($(window).scrollTop() > 100) { $('#back-top').fadeIn(1000); } else { $("#back-top").fadeOut(1000); } }); //点击跳转链接，滚动条跳到0的位置，页面移动速度是1000 $("#back-top").click(function() { $('body').animate({ scrollTop: '0' }, 1000); return false; //防止默认事件行为 }) }) </script> </body> </html>
jquery返回顶部--滑动底部显示出
2023-09-15
76
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
jquery返回顶部--滑动底部显示出
目录
相关文章
|
9月前
|
JavaScript
前端开发
|
12月前
|
JavaScript
|
JavaScript
|
JavaScript
|
JavaScript
|
JavaScript
|
JavaScript
前端开发
|
JavaScript
前端开发
程序员
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件
本篇文章来讲解下是和否的滑动切换组件
切换滑动组件，使用的场景实际上就是一个开和关的场景，一般有是和否，开和关，禁用和启用等等，只需要设置0和1即可
307
0
0
|
JavaScript
|
Web App开发
JavaScript
Android开发
jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部
webtouch（webapp）页面，防苹果手机safari浏览器，往上滑动，底部导航消失，滑动到底部又出现。向下滑动，底部导航出现。
468
0
0