自动显示隐藏返回顶部功能
2012-05-24 14:28
477 查看
功能描述:
当通过浏览器拖动滚动条后,自动显示“返回顶部”图标,当点击“返回顶部”图标后,自动隐藏图标
代码中图标gotop.gif用自己的图片替换就可以了。主要用到jquery的scrollTop()函数,通过拖动滚动条事件来
跟踪滚动条滚动的高度。
代码如下:
在页面头文件中引入jquery
当通过浏览器拖动滚动条后,自动显示“返回顶部”图标,当点击“返回顶部”图标后,自动隐藏图标
代码中图标gotop.gif用自己的图片替换就可以了。主要用到jquery的scrollTop()函数,通过拖动滚动条事件来
跟踪滚动条滚动的高度。
代码如下:
在页面头文件中引入jquery
<script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
/** *锚点控制 */ $(document).ready(function () { $("body").attr("id", "top"); var tpHtml = " <div id='topcontrol' style=' display:none; position: fixed; bottom: 30px; right: 20px; cursor: pointer;' title='返回顶部'><a style='background: url(../images/gotop.gif) no-repeat scroll 0 0 transparent;color: #FFFFFF;display: inline-block;font-size: 0;height: 54px;text-decoration: none;width: 54px;' href='#top'> </a></div>"; $("body").append(tpHtml); $(window).scroll(function () { if ($(window).scrollTop() > 400) { $("#topcontrol").fadeIn(); } else if ($(window).scrollTop() == 0) { $("#topcontrol").fadeOut(); } }); $("#topcontrol").click(function () { $(this).fadeOut(); }); /***************************/ });
相关文章推荐
- 自动显示隐藏返回顶部功能
- css智能显示隐藏返回顶部按妞
- 滚动条事件,当页面滚动到距顶部一定高度时某DIV自动隐藏和显示
- 返回顶部隐藏显示的控制代码
- 返回顶部按钮响应滚动且动态显示与隐藏
- JQ 移动端返回顶部,往下滑动时显示返回按钮,往上滑动时隐藏返回按钮
- 给我的blog加了一个功能,每次打开的时候自动在顶部副标题位置显示一条格言:)
- 滚动条事件,当页面滚动到距顶部一定高度时某DIV自动隐藏和显示
- 纯JS实现页面滚动至顶部并自动显示或隐藏
- 滚动条事件,当页面滚动到距顶部一定高度时某DIV自动隐藏和显示
- 微网站自动显示 返回顶部 按钮 的代码
- 返回顶部按钮响应滚动且动态显示与隐藏
- android中隐藏与显示软键盘以及不自动弹出键盘的方法
- jQuery实现页面滚动时顶部动态显示隐藏
- JQ实现顶部公告自动上缩隐藏
- view的镜像转换实现,按钮自动隐藏 点击又重新显示
- echarts中横坐标值显示不全(自动隐藏)解决方案
- 在 IE 浏览器中,使用 bootstrap 使得页面滚动条浮动显示,自动隐藏,自动消失
- Android Bitmap的截取及状态栏的隐藏和显示功能
- 0920-0929 tableView返回顶部/上架流程/一些小功能