微网站自动显示 返回顶部 按钮 的代码
2015-05-15 13:06
701 查看
<!DOCTYPE html> <html> <head> <title>微网站返回顶部测试</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <body> <div id="box" style="width:100%; height:2000px; border:1px solid #ccc;"> <input type="button" id="test" value="测试" /> </div> <!--返回顶部--> <div id="divTop" class="returntop" style="position:fixed; right:10px; bottom:90px; display:none; width: 40px; height: 40px; background-color:#ccc;"></div> <script src="jquery-1.11.1.js"></script> <script type="text/javascript"> $(function () { //返回顶部 $("#divTop").click(function () { $("body, html").animate({ scrollTop: 0 }, 0); $(this).hide(); }); //页面滚动时,“返回顶部”按钮 是否显示 $(window).scroll(function () { showBackToTop(); }); //页面resize时,“返回顶部”按钮 是否显示 $(window).resize(function () { showBackToTop(); }); //测试按钮单击事件 $("#test").click(function(){ $("#box").height(5000); }); }); //返回顶部 var globalScrollTop = $(document).height() - $(window).height(); //alert($(document).height() + " - " + $(window).height()); function showBackToTop() { if ($(window).scrollTop() > globalScrollTop) { $("#divTop").show(); } else { $("#divTop").hide(); } } </script> </body> </html>
相关文章推荐
- 返回顶部按钮的代码jQuery topLink Plugin
- JQ 移动端返回顶部,往下滑动时显示返回按钮,往上滑动时隐藏返回按钮
- 移动端返回顶部右下角按钮代码
- 返回顶部隐藏显示的控制代码
- 【Android】ListView监听上下滑动(判断是否显示返回顶部按钮
- Android】ListView监听上下滑动(判断是否显示返回顶部按钮)
- Material Design系列,自定义Behavior之上滑显示返回顶部按钮
- 点击按钮——网页返回顶部代码
- jquery左边浮动到一定位置时显示返回顶部按钮
- 【Android】ListView监听上下滑动(判断是否显示返回顶部按钮)
- jquery左边浮动到一定位置显示返回顶部代码
- 利用ajax在index页面自动执行方法并显示相关内容,在执行相关按钮操作(如登录注册)后返回index页面后ajax不执行,无法显示相关内容的问题解决方法之一
- jquery实现当页面滚动超过一屏时显示返回顶部按钮
- 网页点击按钮返回顶部代码
- 自动显示隐藏返回顶部功能
- 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解
- 一个带微博按钮的jquery返回顶部效果代码
- AutoScrollBackLayout:给你的列表自动添加返回顶部按钮
- Android点击按钮返回顶部实现代码
- Material Design系列之Behavior上滑显示返回顶部按钮