jquery监听滚动条,实现“返回顶部”
2016-04-10 22:48
781 查看
我们在浏览网页时,网页内容过多会使得滚动条缩小并越来越靠近页面底部,当想返回到页面最顶端时靠滚动鼠标会很麻烦,因此在很多网页在靠近滚动条处都有一个“返回顶部”等内容的按钮,以快速的回到页面最顶端。接下来我们详细描述如何实现这一功能
1、html
3、监听滚动条与页面顶部的距离
其中“to_top”是“返回顶部”按钮的ID,
页面效果为:
1、html
<!--显示右侧快速导航栏--> <div class="quick_bar" id="quick_bar"> <a id="to_top" class="to_top" title="返回顶部" href="javascript:void(0)"> <img src="{$Think.const.IMG_URL}top.png" alt="返回顶部"/> </a> <a id="to_reply" class="to_reply" title="快速留言" href="javascript:void(0)" > <img src="{$Think.const.IMG_URL}reply.png" alt="快速留言"/> </a> </div>2、css样式
.quick_bar {position: fixed;left: 95%; top:40%;width: 50px;height: 150px;} .to_top { display: none} .to_top:hover{ opacity:0.5} .to_reply {display: block} .to_reply:hover{ opacity: 0.5}
3、监听滚动条与页面顶部的距离
$(document).scroll(function(){ var top=$(document).scrollTop(); if(top<300){ $('#to_top').hide(); } else{ $('#to_top').show(); } })
其中“to_top”是“返回顶部”按钮的ID,
$(document).scroll(function(){}是滚动条移动时触发的事件
$(document).scrollTop()是监测滚动条距离页面顶部的距离
if判断条件中,当滚动条距离页面小于300px时,则不显示“返回顶部”,否则显示
4、事件响应
<pre name="code" class="javascript">$('#to_top').click(function(){ $('body,html').animate({scrollTop:0},300); })返回页面顶部,时间设置为300毫秒
页面效果为:
相关文章推荐
- 【JQuery源码】事件绑定
- 【jQuery源码】事件存储结构
- jQuery的四个加载方式
- jquery.cookie.js操作Cookie
- jQuery点击按钮实现div的隐藏和显示切换效果
- 一周乱弹(eclipse git重复输入密码、jQuery自动补全)
- atitit.jQuery Validate验证框架详解与ati Validate 设计新特性
- atitit.jQuery Validate验证框架详解与ati Validate 设计新特性
- atitit.jQuery Validate验证框架详解与ati Validate 设计新特性
- jquery 实现点击 table中一行tr自动复制本行添加到本行之后 点击按钮回复到初始状态
- jQuery中的bind() live() delegate()之间区别分析
- JQuery选择器
- Ajax、jquery实现前后台数据交互
- 通过jquery addClass()方法,给指定按钮添加高亮显示效果
- jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )
- Jquery实战——横纵向的菜单
- jquery跨域调用wcf
- 从零开始学_JavaScript_系列(七)——jquery(复选框及互斥、div块、修改css、标签数组、ajax连续加载)
- Jquery第二步
- 对jQuery的事件绑定的一些思考