这里我介绍五种利用jQuery实现返回顶部效果
方法１、好处：回顶部按钮紧贴网页外层DIV边框；缺点：滚动时不够平滑。
| 代码如下 | 复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <style> var showDistance = 1;//距离顶端多少距离开始显示go-top return <div id="container"> </body> |
|
方法２、利用jQuery创建层，再对创建层相对定位出回顶部按钮的位置。
好处：回顶部按钮定位相对灵活；缺点：滚动时还是不够平滑。
| 代码如下 | 复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <style> #container{width:980px;margin:0 auto;border:solid 1px blue;text-align:center} .backtop-box{position:absolute;left:0;top:0;width:100%;z-index:101;} .backtop-box-i{width:960px;margin:0 auto;position:relative;} .backtop-box b{display:none;position:absolute;left:960px;cursor:pointer;} </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" > $(document).ready(function(){(function(){function e(){var a=Math.max(document.documentElement.scrollTop,document.body.scrollTop),b=$("#footer");b=b.offset().top+b.height();var g=a+f.height();if(a>5){c.css({top:Math.min(b,g)-100});if(!d){d=true;c.stop().animate({opacity:1},500)}}else if(d){d=false;c.stop().animate({opacity:0},500)}}var c=$('<div class="backtop-box"><div class="backtop-box-i"><b title="u8fd4u56deu9875u9996"><img src="backtop.png"/></b></div></div>').appendTo(document.body).find("b"), </script> <body id="body"> <div id="container"> |
|
方法３和方法４、回顶部位置都处在页面右下角，属绝对定位，不随分辨率变化而变化。
好处：滚动时平滑固定；缺点：定位不灵活，方法3在IE6下有点问题。
| 代码如下 | 复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <style> (function(h){var m=h.scrollTo=function(b,c,g){h(window).scrollTo(b,c,g)};m.defaults={axis:'y',duration:1};m.window=function(b){return h(window).scrollable()};h.fn.scrollable=function(){return this.map(function(){var b=this.parentWindow||this.defaultView,c=this.nodeName=='#document'?b.frameElement||b:this,g=c.contentDocument||(c.contentWindow||c).document,i=c.setInterval;return c.nodeName=='IFRAME'||i&&h.browser.safari?g.body:i?g.documentElement:this})};h.fn.scrollTo=function(r,j,a){if(typeof j=='object'){a=j;j=0}if(typeof a=='function')a={onAfter:a};a=h.extend({},m.defaults,a);j=j||a.speed||a.duration;a.queue=a.queue&&a.axis.length>1;if(a.queue)j/=2;a.offset=n(a.offset);a.over=n(a.over);return this.scrollable().each(function(){var k=this,o=h(k),d=r,l,e={},p=o.is('html,body');switch(typeof d){case'number':case'string':if(/^([+-]=)?d+(px)?$/.test(d)){d=n(d);break}d=h(d,this);case'object':if(d.is||d.style)l=(d=h(d)).offset()}h.each(a.axis.split(''),function(b,c){var g=c=='x'?'Left':'Top',i=g.toLowerCase(),f='scroll'+g,s=k[f],t=c=='x'?'Width':'Height',v=t.toLowerCase();if(l){e[f]=l[i]+(p?0:s-o.offset()[i]);if(a.margin){e[f]-=parseInt(d.css('margin'+g))||0;e[f]-=parseInt(d.css('border'+g+'Width'))||0}e[f]+=a.offset[i]||0;if(a.over[i])e[f]+=d[v]()*a.over[i]}else e[f]=d[i];if(/^d+$/.test(e[f]))e[f]=e[f]<=0?0:Math.min(e[f],u(t));if(!b&&a.queue){if(s!=e[f])q(a.onAfterFirst);delete e[f]}});q(a.onAfter);function q(b){o.animate(e,j,a.easing,b&&function(){b.call(this,r,a)})};function u(b){var c='scroll'+b,g=k.ownerDocument;return p?Math.max(g.documentElement[c],g.body[c]):k[c]}}).end()};function n(b){return typeof b=='object'?b:{top:b,left:b}}})(jQuery); //usage w/ smoothscroll
</script> <body id="body"> <br><br><br><br><br><br><br><br><br> </body> |
|
方法５、很多博客都使用了这种，我也认为是个不错的选择。
| 代码如下 | 复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <style> |
|
友情提示
jquery.js文件包这里没有提供，大家可自行去官方下载最新版本的jquery api文件哦。