jquery实现当页面滚动超过一屏时显示返回顶部按钮
2015-11-11 18:17
921 查看
<!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>jquery实现当页面滚动超过一屏时显示返回顶部按钮</title> <style> #go_top{position:fixed; LEFT: 85%;bottom:50px;} </style> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("#go_top").hide(); $(function () { //检测屏幕高度 var height=$(window).height(); //scroll() 方法为滚动事件 $(window).scroll(function(){ if ($(window).scrollTop()>height){ $("#go_top").fadeIn(500); }else{ $("#go_top").fadeOut(500); } }); $("#go_top").click(function(){ $('body,html').animate({scrollTop:0},100); return false; }); }); }); </script> </head> <body> 1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/> 1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/> 1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/> 1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/> 1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/> 1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/> 1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/> 1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/> 1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/> 1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/> 1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/> 1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/> <div id="go_top"> <img src="./img/top.png"/ alt="回到顶部图片"> </div> </body> </html>
相关文章推荐
- AJAX+json+jquery实现预加载瀑布流布局
- JQuery 限制文本框只能输入数字和小数点
- jQuery对象长度size
- jquery 中ajax的使用
- jQuery.form提交复杂表单
- jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——一些有用的Sizzle API
- jquery 追加table
- jQuery通过滚轮滚动动态加载图片
- 多个jquery冲突
- 用jQuery.form实现批量输入控件的提交
- 35 个 jQuery 小技巧
- Rails项目中使用jQuery操作session
- jquery on事件jquery on实现绑定多个事件
- IE7下不支持jquery.attr("onclick","function(){}"),
- 配置JQuery与其它库的兼容性
- 很多人想要的Jquery 加载Loading效果,可以加到自己的项目中,结合Ajax使用
- jquery bind()与unbind()用法
- jquery $(document).ready() 与window.onload的区别
- jQuery实现页面详情展开收起
- 每个程序员都会的 35 个 jQuery 小技巧