方法一:

效果图

css代码:

.backToTop{display:none;width:18px;line-height:1.2;padding:5px0;background-color:#000;color:#fff;font-size:12px;text-align:center;position:fixed;_position:absolute;right:10px;bottom:100px;_bottom:"auto";cursor:pointer;opacity:.6;filter:Alpha(opacity=60);}

js代码:

(function(){var$backToTopTxt="返回顶部",$backToTopEle=$('<divclass="backToTop"></div>').appendTo($("body")).text($backToTopTxt).attr("title",$backToTopTxt).click(function(){$("html,body").animate({scrollTop:0},120);}),$backToTopFun=function(){varst=$(document).scrollTop(),winh=$(window).height();(st>0)?$backToTopEle.show():$backToTopEle.hide();//IE6下的定位if(!window.XMLHttpRequest){$backToTopEle.css("top",st+winh-166);}};$(window).bind("scroll",$backToTopFun);$(function(){$backToTopFun();});})();

方法二:

效果图

代码:

需要引人jquery和一张向上箭头图片up.png

<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/><title>Inserttitlehere</title><scripttype="text/javascript"src="../javascript/jquery-1.6.js"></script><styletype="text/css">body{height:1200px;}#testIE6{_height:1200px;_width:200px;}.scroll-up{background:#dcdcdcurl('up.png')no-repeatcentercenter;width:48px!important;height:48px!important;_width:58px;_height:58px;position:fixed;_position:absolute;/*forIE6*/opacity:.6;filter:Alpha(opacity=60);/*forIE*/padding:5px;cursor:pointer;display:none;border-radius:5px;-webkit-transition-property:background-color,opacity;-webkit-transition-duration:1s;-webkit-transition-timing-function:ease;-moz-transition-property:background-color;-moz-transition-duration:1s;-moz-transition-timing-function:ease;}.scroll-up:hover{background-color:#B9B9B9;opacity:.8;}</style></head><body><divid="testIE6"></div><scripttype="text/javascript">;(function($){$.scrollBtn=function(options){varopts=$.extend({},$.scrollBtn.defaults,options);var$scrollBtn=$('<div></div>').css({bottom:opts.bottom+'px',right:opts.right+'px'}).addClass('scroll-up').attr('title',opts.title).click(function(){$('html,body').animate({scrollTop:0},opts.duration);}).appendTo('body');$(window).bind('scroll',function(){varscrollTop=$(document).scrollTop(),viewHeight=$(window).height();if(scrollTop<=opts.showScale){if($scrollBtn.is(':visible'))$scrollBtn.fadeOut(500);}else{if($scrollBtn.is(':hidden'))$scrollBtn.fadeIn(500);}if(isIE6()){vartop=viewHeight+scrollTop-$scrollBtn.outerHeight()-opts.bottom;$scrollBtn.css('top',top+'px');}});functionisIE6(){if($.browser.msie){if($.browser.version=='6.0')returntrue;}}};/***-params*-showScale:scrolldownhowmuchtoshowthescrollupbutton*-right:torightofscrollablecontainer*-bottom:tobottomofscrollablecontainer*/$.scrollBtn.defaults={showScale:100,right:10,bottom:10,duration:200,title:'backtotop'}})(jQuery);$.scrollBtn({showScale:200,bottom:20,right:20});</script></body></html>

附件:http://down.51cto.com/data/2362200