jquery回到顶部源码分享-
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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="#" class="go-top"><img src="themes/cyjy/images/go-top.png" /></a>‘).appendTo("body"); });
注意第18行变量cssfixedsupport,该插件完美支持IE6下有不支持position:fixed的bug.
var cssfixedsupport=$.browser.msie && parseFloat($.browser.version) < 7;//判断是否ie6 var controlTop=$window.height() - $this.height()-opts.pageHeightJg; controlTop=cssfixedsupport ? $window.scrollTop() + controlTop : controlTop;
如在IE6下就用absolute进行布局,这样在鼠标滚动时要通过$window.scrollTop()获取滚动条到顶部的垂直高度来修正controlTop参数。
通过触发鼠标单击事件回到顶部!
以上是关于jquery回到顶部源码分享-的主要内容,如果未能解决你的问题,请参考以下文章