你的位置:首页 > Java教程

[Java教程]jquery回到顶部源码分享


// JavaScript Document(function($){  var goToTopTime;  $.fn.goToTop=function(options){    var opts = $.extend({},$.fn.goToTop.def,options);    var $window=$(window);    $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); // opera fix    $(this).hide();    var $this=$(this);    clearTimeout(goToTopTime);    goToTopTime=setTimeout(function(){      var controlLeft;      if ($window.width() > opts.pageHeightJg * 2 + opts.pageWidth) {        controlLeft = ($window.width() - opts.pageWidth) / 2 + opts.pageWidth + opts.pageWidthJg;      }else{        controlLeft = $window.width()- opts.pageWidthJg-$this.width();      }      var cssfixedsupport=$.browser.msie && parseFloat($.browser.version) < 7;//判断是否ie6      var controlTop=$window.height() - $this.height()-opts.pageHeightJg;      controlTop=cssfixedsupport ? $window.scrollTop() + controlTop : controlTop;      var shouldvisible=( $window.scrollTop() >= opts.startline )? true : false;            if (shouldvisible){        $this.stop().show(opts.showBtntime);      }else{        $this.stop().hide(opts.showBtntime);      }            $this.css({        position: cssfixedsupport ? 'absolute' : 'fixed',        top: controlTop,        left: controlLeft      });    },500);        $(this).click(function(event){      $body.stop().animate( { scrollTop: $(opts.targetObg).offset().top}, opts.duration);      $(this).blur();      event.preventDefault();      event.stopPropagation();    });  };    $.fn.goToTop.def={    pageWidth:950,//页面宽度    pageWidthJg:10,//按钮和页面的间隔距离    pageHeightJg:50,//按钮和页面底部的间隔距离          startline:20,//出现回到顶部按钮的滚动条scrollTop距离    duration:200,//回到顶部的速度时间    showBtntime:100,//显示\隐藏回到顶部按钮的速度时间    targetObg:"body"//目标位置  };})(jQuery);$(function(){  $('<a href="#" ><img src="themes/cyjy/images/go-top.png" alt="" /></a>').appendTo("body");});

  

注意第18行变量cssfixedsupport,该插件完美支持IE6下有不支持position:fixed的bug.

var cssfixedsupport=$.browser.msie && parseFloat($.browser.version) < 7;//判断是否ie6var controlTop=$window.height() - $this.height()-opts.pageHeightJg;controlTop=cssfixedsupport ? $window.scrollTop() + controlTop : controlTop;

如在IE6下就用absolute进行布局,这样在鼠标滚动时要通过$window.scrollTop()获取滚动条到顶部的垂直高度来修正controlTop参数。

通过触发鼠标单击事件回到顶部!