JQUERY右侧悬浮返回顶部代码
2017-06-22 18:00
399 查看
这个是用JQURY实现的一键置顶功能 直接复制粘贴代码就可以用了哦~~
具体效果如下 比心♥~~
具体效果如下 比心♥~~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery右侧悬浮返回顶部代码</title> </head> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js" type="text/javascript"></script> <style> *{margin:0;padding:0;list-style:none;} body{font-family:'MicroSoft Yahei'} #rightButton{ position:fixed; _position:absolute; top:500px; right:0; z-index:999999; display:block;} #backToTop{z-index:999999; display:none;} a.backToTop_a{ background-color: skyblue; no-repeat; width:68px; height:79px; display:block; } a.backToTop_a:active{ background-color: blue; no-repeat; } </style> <body> <div style="height:1200px;"> <!--右侧图标--> <div id="rightButton"> <ul id="right_ul"> <li><div id="backToTop"><a href="javascript:;" onfocus="this.blur();" class="backToTop_a png"></a></div></li> </ul> </div> </body> <script type="text/javascript"> $("#backToTop").on("click", function(){ var _this = $(this); $('html,body').animate({ scrollTop: 0 }, 500 ,function(){ _this.hide(); }); }); $(window).scroll(function(){ var htmlTop = $(document).scrollTop(); if( htmlTop > 0){ $("#backToTop").fadeIn(); }else{ $("#backToTop").fadeOut(); } }); </script> </html>
相关文章推荐
- jquery最简单的右侧返回顶部代码(滚动才出现)
- jQuery一句代码实现返回顶部功能
- jquery悬浮在右侧的在线客服代码
- jQuery制作带有微信二维码扫描的页面返回顶部代码
- jquery实现鼠标向下滚动右侧才出现返回顶部链接
- Jquery---用jQuery实现的智能隐藏、滑动效果的返回顶部代码
- jquery代码: 返回页面顶部
- “返回顶部代码”滑动效果 jQuery超级简单实用写法
- jQuery实现的个性化返回底部与返回顶部特效代码
- 返回顶部按钮的代码jQuery topLink Plugin
- backtop返回页面顶部jquery代码
- 用jQuery实现的智能隐藏、滑动效果的返回顶部代码
- jQuery实现的个性化返回底部与返回顶部特效代码
- 仿新浪微博返回顶部的jquery实现代码
- jQuery实现' 返回顶部 ' 和 ' 导航悬浮 '
- jquery左边浮动到一定位置显示返回顶部代码
- jQuery 简单返回顶部代码
- 基于jQuery实现返回顶部实例代码
- jquery使页面返回到顶部代码
- jquery小火箭返回顶部代码分享