jquery返回顶部
2014-01-09 14:20
369 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery返回顶部</title> <style type="text/css"> .mainContent{ background: #ededed; width: 960px; height: 1000px; margin: 0 auto; } .mainContent h3{ text-align: center; padding:20px; } p#back-to-top{ position:fixed; display:none; bottom:100px; right:80px; } p#back-to-top a{ text-align:center; text-decoration:none; color:#d1d1d1; display:block; width:64px; /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/ -moz-transition:color 1s; -webkit-transition:color 1s; -o-transition:color 1s; } p#back-to-top span{ background: url(images/back-to-top.png); background-repeat: no-repeat; border-radius:6px; display:block; height:64px; width:56px; margin-bottom:5px; /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/ -moz-transition:background 1s; -webkit-transition:background 1s; -o-transition:background 1s; } </style> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> </head> <body> <div class="mainContent"> <h3>演示返回顶部效果</h3> </div> <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> <script> $(function() { //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失 $(window).scroll(function() { if ($(window).scrollTop()>100) { $("#back-to-top").fadeIn(1500); } else { $('#back-to-top').fadeOut(1500); } }); //当点击跳转链接后,回到页面顶部位置 $('#back-to-top').click(function() { $('body,html').animate({scrollTop:0},1000); return false; }) }) </script> </body> </html>
相关文章推荐
- 104款JavaScript jQuery高级页面组件开源软件
- 写第一个jquery插件实录
- 使用jQuery加载script脚本
- 使用jQuery加载script脚本
- jquery input change事件
- 使用jQuery加载script脚本
- 2013 年 12 月最好的 35+ 个 jQuery 插件
- 学习JQuery - 14
- jquery属性操作 - attr() 方法
- jquery自定义函数
- jquery mobile 和phonegap开发总结之三跨域加载页面
- jquery中<select/>下拉框元素中类样式chosen-select-deselect的使用
- [ jQuery ] jquery操作select、checkbox、radio!
- jquery操作select、checkbox、radio!(每次写都需要去查,还是总结一下吧)
- Jquery 设置,获取radio checkbox
- Infinite Ajax Scroll一个jQuery插件应用介绍
- jQuery Ajax 全解析get/load/serialize()/Query.ajax( options )jQuery.getScript(()
- jquery ---jQueryEasyUI
- jquery中EasyUi引入太简单了
- JQuery操作下拉框 select