夏日博客

A-A+

jQuery固定DIV实现返回顶部效果代码

2016年01月07日 前端设计 暂无评论 阅读 4 views 次

返回顶部在网上一搜索有不少，但小编需要的这个例子是需要固定在指定div上而不是以浏览器不参照点，下面一起来看看我整理了一个网站的代码

jQuery固定DIV实现返回顶部效果代码.

htm代码.这一段最好放在html中最下面,代码如下:

  1. <script type="text/javascript">  
  2. $(function(){  
  3. //gotop  
  4. var options = {pageWidth:960,pageWGap:1,pageHGap:30,startline:100,duration:200,showBtntime:100}  
  5. $('<a href="javascript:void(0);" class="go-top">返回顶部</a>').appendTo('body').goToTop(options);  
  6. });  
  7. //tongji  
  8. </script>  

js代码如下:

  1. $.fn.extend({  
  2.     goToTop: function (b) {  
  3.         var b = $.extend({  
  4.             pageWidth: 940,  
  5.             pageWGap: 10,  
  6.             pageHGap: 30,  
  7.             startline: 20,  
  8.             duration: 200,  
  9.             showBtntime: 100  
  10.         }, b);  
  11.         var e = $(this);  
  12.         var f = $(window);  
  13.         var d = (window.opera) ? (document.compatMode == "CSS1Compat" ? $("html") : $("body")) : $("html,body");  
  14.         var c = !($.browser.msie && parseFloat($.browser.version) < 7);  
  15.         var a = false;  
  16.         e.css({  
  17.             opacity: 0,  
  18.             position: (c ? "fixed" : "absolute")  
  19.         });  
  20.         e.click(function (g) {  
  21.             d.stop().animate({  
  22.                 scrollTop: 0  
  23.             }, b.duration);  
  24.             e.blur();  
  25.             g.preventDefault();  
  26.             g.stopPropagation()  
  27.         });  
  28.         f.bind("scroll resize", function (i) {  
  29.             var h;  
  30.             if (f.width() > b.pageHGap * 2 + b.pageWidth) {  
  31.                 h = (f.width() - b.pageWidth) / 2 + b.pageWidth + b.pageWGap  
  32.             } else {  
  33.                 h = f.width() - b.pageWGap - e.width()  
  34.             }  
  35.             var j = f.height() - e.height() - b.pageHGap;  
  36.             j = c ? j : f.scrollTop() + j;  
  37.             e.css({  
  38.                 left: h + "px",  
  39.                 top: j + "px"  
  40.             });  
  41.             var g = (f.scrollTop() >= b.startline) ? true : false;  
  42.             if (g && !a) {  
  43.                 e.stop().animate({  
  44.                     opacity: 1  
  45.                 }, b.showBtntime);  
  46.                 a = true  
  47.             } else {  
  48.                 if (a && !g) {  
  49.                     e.stop().animate({  
  50.                         opacity: 0  
  51.                     }, b.showBtntime);  
  52.                     a = false  
  53.                 }  
  54.             }  
  55.         })  
  56.     }  
  57. });  
标签：

给我留言