回到顶部和返回首页jquery插件

打造最全的CMS类教程聚合！

 第一种方法：在网页<body></body>之间插入：

  1. <!--返回顶部开始--> 
  2. <div id="full" style="width:50px; height:95px; position:fixed; left:50%; top:425px; margin-left:493px; z-index:100; text-align:center; cursor:pointer;"><a><img src="images/up.png" border=0 alt="返回顶部"></a></div> 
  3. <script src="/js/gotop.js" type="text/javascript"></script> 
  4. <!--返回顶部结束--> 

 修改图片路径和js路径，保证图片和JS都 能打开就行了 ！

JS文件下载：点击下载

第二种方法：回到顶部功能：在网页<body></body>之间插入：

  1. <!--引入jquery库文件--> 
  2. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>  
  3. <!--功能代码开始--> 
  4. <script>  
  5. (function() { 
  6.     var $backToTopTxt = "回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")) 
  7.         .text($backToTopTxt).attr("title", $backToTopTxt).click(function() { 
  8.             $("html, body").animate({ scrollTop: 0 }, 120); 
  9.     }), $backToTopFun = function() { 
  10.         var st = $(document).scrollTop(), winh = $(window).height(); 
  11.         (st > 0)? $backToTopEle.show(): $backToTopEle.hide();    
  12.         //IE6下的定位 
  13.         if (!window.XMLHttpRequest) { 
  14.             $backToTopEle.css("top", st + winh - 166);   
  15.         } 
  16.     }; 
  17.     $(window).bind("scroll", $backToTopFun); 
  18.     $(function() { $backToTopFun(); }); 
  19. })(); 
  20. </script>  

返回首页功能：

原理就是在基于上段代码中的.click(function() {$("html, body").animate({ scrollTop: 0 }, 120);})点击事件中加入转向链接！具体代码如下：

  1. <script>  
  2. (function() { 
  3.     var $backToTopind = "回首页", $backToTopEle = $('<div class="backToTop1"></div>').appendTo($("body")) 
  4.         .text($backToTopind).attr("title", $backToTopind).click(function() {location.href='http://www.meowpet.com'; 
  5.     }), $backToTopFun = function() { 
  6.         var st = $(document).scrollTop(), winh = $(window).height(); 
  7.         (st > 0)? $backToTopEle.show(): $backToTopEle.hide(); 
  8.  
  9.         //IE6下的定位 
  10.         if (!window.XMLHttpRequest) { 
  11.             $backToTopEle.css("top", st + winh);     
  12.         } 
  13.     }; 
  14.     $(window).bind("scroll", $backToTopFun); 
  15.     $(function() { $backToTopFun(); }); 
  16. })(); 
  17. </script>  

 第三种方法：

  1. <script type="text/javascript"> 
  2. var w = 240; 
  3. var h = 59; 
  4. var str = ""; 
  5. var obj = document.getElementById("divStayTopLeft"); 
  6. if (obj)str = obj.innerHTML; 
  7. if( typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat'){ 
  8. document.writeln('<DIV  style="z-index:9;right:0;bottom:0;height:'+h+'px;width:'+w+'px;overflow:hidden;POSITION:fixed;_position:absolute; _margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop);">'); 
  9. } 
  10. else { 
  11. document.writeln('<DIV  style="z-index:9;right:0;bottom:0;height:'+h+'px;width:'+w+'px;overflow:hidden;POSITION:fixed;*position:absolute; *top:expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-this.style.pixelHeight);">'); 
  12. } 
  13. document.writeln('<div style="clear:both;margin:auto;height:40px;font-size:14px;overflow:hidden;font-weight:bold;text-align:left;"><a href="javascript:scroll(0,0)" hidefocus="true"><img src="http://images.cnblogs.com/top.gif" alt="回到顶部" style="border: 0px;" /></a><a href="http://www.meowpet.com/" hidefocus="true"><img src="http://images.cnblogs.com/hsyg.gif" alt="返回首页" style="border: 0px;" /></a></div> '); 
  14. document.write('<div style="clear:both;margin:auto;overflow:hidden;text-align:left;">'+str+'</div>'); 
  15. document.writeln('</DIV>'); 
  16.  
  17. </script> 

里边有2张图片，可自行替换，这里就不提供了，找不到图片路径的话会显示成alt里的汉字！

posted on 2012-05-06 13:47  _安静  阅读(5725)  评论(1)  编辑  收藏  举报

导航