返回旧版| 微信建站| 建站之家论坛| 我要建站 | 建站学习 | 加入收藏
jquery教程当前位置:首页 > HTML教程 > jquery教程 > 正文

收藏了三jQuery返回顶部特效代码

发布时间:2013-09-02 21:29:00   来源:   点击:

 返回顶部是我们经常会在很多网站中看到这种效果,如新浪网,淘宝网都可以看到有返回顶部效果,这样方便用户提升了网站用户体验了。

 

收藏了三jQuery返回顶部特效代码

1、

  1. <title>jQuery返回顶部特效 </title> 
  2. </head> 
  3. <body> 
  4. <style type="text/css"> 
  5. /*返回顶部*/ 
  6. #roll_top {position:relative; margin-bottom:1px;
  7. cursor:pointer;height:60px;width:60px;display:block;background:#ddd;} 
  8. #roll_top:hover {background:#666;} 
  9. #roll {width:60px;position:fixed;right:30px;bottom:50px; 
  10.  _position:absolute; 
  11.  _margin-top:300px; 
  12.  _bottom:auto; 
  13.  _top:expression(eval(document.documentElement.scrollTop+
  14. document.documentElement.clientHeight-40-this.offsetHeight-
  15. (parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); 
  16. </style> 
  17. <p align="right"> 
  18.  
  19. </p> 
  20. <div id="roll"> </i> <a title="回顶部" id="roll_top" href="javascript:;" style="display: block; "></a> </div> 
  21. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
  22. <script type="text/javascript"> 
  23. jQuery(function(){ 
  24. /*返回顶部与找客服*/ 
  25. var jq=jQuery
  26. jq('#roll_top').hide(); 
  27. jq(window).scroll(function () { 
  28. if (jq(window).scrollTop() > 0) { 
  29. jq('#roll_top').fadeIn(400);//当滑动栏向下滑动时,按钮渐现的时间 
  30. } else { 
  31. jq('#roll_top').fadeOut(200);//当页面回到顶部第一屏时,按钮渐隐的时间 
  32. }); 
  33. jq('#roll_top').click(function () { 
  34. jq('html,body').animate({ 
  35. scrollTop : '0px' 
  36. }, 200);//返回顶部所用的时间  
  37. }); 
  38. }); 
  39. </script> 

实例
仿新浪网“返回顶部”效果

2、

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <title>仿新浪网“返回顶部”效果</title> 
  5. <meta http-equiv="content-type" content="text/html;charset=gb2312"> 
  6. <style type="text/css"> 
  7. .backToTop { 
  8.  display: none; 
  9.  width: 18px; 
  10.  line-height: 1.2; 
  11.  padding: 5px 0; 
  12.  background-color: #000; 
  13.  color: #fff; 
  14.  font-size: 12px; 
  15.  text-align: center; 
  16.  position: fixed; 
  17.  _position: absolute; 
  18.  right: 10px; 
  19.  bottom: 100px; 
  20.  _bottom: "auto"; 
  21.  cursor: pointer; 
  22.  opacity: .6; 
  23.  filter: Alpha(opacity=60); 
  24. </style> 
  25. <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> 
  26. </head> 
  27. <body> 
  28. <p>如果预览时左下角提示错误,<font color=red>请先刷新一下本页面</font>就可以看到效果了。</p> 
  29. <p>  拖动滚动条到页面底部就会显示“返回顶部”按钮。</p> 
  30. <p> 更多代码请访问:<a href="http://www.111cn.net/" target="_blank">网页制作教程</a></p> 
  31. <p></p> 
  32. <div style="height:2000px;"></div> 
  33. <script type="text/javascript"> 
  34. (function() { 
  35.     var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")) 
  36.         .text($backToTopTxt).attr("title", $backToTopTxt).click(function() { 
  37.             $("html, body").animate({ scrollTop: 0 }, 120); 
  38.     }), $backToTopFun = function() { 
  39.         var st = $(document).scrollTop(), winh = $(window).height(); 
  40.         (st > 0)? $backToTopEle.show(): $backToTopEle.hide(); 
  41.         //IE6下的定位 
  42.         if (!window.XMLHttpRequest) { 
  43.             $backToTopEle.css("top", st + winh - 166); 
  44.         } 
  45.     }; 
  46.     $(window).bind("scroll", $backToTopFun); 
  47.     $(function() { $backToTopFun(); }); 
  48. })(); 
  49. </script> 
  50. </body> 
  51. </html> 

实例
该效果集结了返回底部、返回顶部、网站留言导航三种功能,网站留言的链接你可以修改为任意一个您想导航的链接,这个可以灵活运用了

3、

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>特效加工厂</title> 
  6. <script type="text/javascript" src="/ajaxjs/jquery-1.4.2.min.js"></script> 
  7. <style type="text/css"> 
  8. body 
  9. margin:0; padding:0; font-size:12px; 
  10. #main 
  11. width:910px; margin:0 auto; height:2000px; 
  12. .go{width:47px;height:106px;position:fixed;_position:absolute;
  13. _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight
  14. -this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||200)-(parseInt(this.currentStyle.marginBottom,10)||0)));
  15. right:12px;bottom:25%; background-image:url("/jscss/demoimg/201208/tobg.png"); background-repeat:no-repeat;} 
  16. .go a{background:url(/jscss/demoimg/201208/a.png) no-repeat;display:block;text-indent:999em;
  17. width:37px;margin:5px;border:0;overflow:hidden;float:left; cursor:pointer;} 
  18. .go .top{background-position:0 0px;height:22px} 
  19. .go .feedback{background-position:0 -22px;height:32px} 
  20. .go .bottom{background-position:0 -55px;height:22px} 
  21. .go .top:hover{background-position:-38px -0px} 
  22. .go .feedback:hover{background-position:-38px -22px} 
  23. .go .bottom:hover{background-position:-38px -55px} 
  24. </style> 
  25. <script type="text/javascript"> 
  26.     $(function () { 
  27.         $(".top").click(//定义返回顶部点击向上滚动的动画 
  28.         function () { 
  29.             $('html,body').animate({ scrollTop: 0 }, 700); 
  30.         }); 
  31.         $(".bottom").click(//定义返回顶部点击向上滚动的动画 
  32.         function () { 
  33.             $('html,body').animate({ scrollTop: document.body.clientHeight }, 700); 
  34.         }); 
  35.     }) 
  36. </script> 
  37. </head> 
  38. <body> 
  39. <div id="main"> 
  40. <div class="go"> 
  41.  <a title="返回顶部" class="top"></a> 
  42.  <a title="如果您有意见,请反馈给我们!" class="feedback" href="/guestbook/" target="_blank"></a> 
  43.  <a title="返回底部" class="bottom" ></a> 
  44. </div> 
  45. </div> 
  46. </body> 
  47. </html> 

 

 

版权所有:郑州腾石网络科技有限公司 备案信息:豫ICP备18019117号
站长QQ:2863868475 业务合作咨询:15137100750(同微信)
本站所有投放的广告是有其他网站提供,不代表本站立场,同时网站首页广告位对外出租详情咨询本站站长!同时欢迎广大站长加入个人建站团队
  • 建站客服
  • CMS仿站
  • CMS学习
  • 技术交流群:336572814