返回顶部按钮很多站都有，实现方法也很简单，这次分享一个效果不太一样的：图标采用CSS3形式，页面返回时会有弹簧效果。效果来源于给力壁纸的作者博客。
哎，嘴笨，大家看看本页面的效果就明白啦。图标颜色淡，拉到最底就可以明显看到了。
同样，先上CSS：
以下代码贴到style.css中
代码语言：javascript复制/* back top */
#back-to-top {
position: fixed;
display: block;
width: 48px;
height: 48px;
right: 30px;
bottom: 30px;
background: white;
border-radius: 24px;
cursor: pointer;
opacity: 0.6;
}
#back-to-top:hover {
opacity: 1;
}
#back-to-top:hover #rocket path {
fill:#94d1ff;
}
#back-to-top #rocket {
margin: 8px auto;
display: block;
opacity: 0.
}
#back-to-top.hidden {
opacity: 0;
}接着JS：
下面的代码贴到footer或者header都行
代码语言：javascript复制<div id="back-to-top" class="hidden">
<svg id="rocket" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 64 64">
<path fill="#CCCCCC" d="M42.057,37.732c0,0,4.139-25.58-9.78-36.207c-0.307-0.233-0.573-0.322-0.802-0.329
c-0.227,0.002-0.493,0.083-0.796,0.311c-13.676,10.31-8.95,35.992-8.95,35.992c-10.18,8-7.703,9.151-1.894,23.262
c1.108,2.693,3.048,2.06,3.926,0.115c0.877-1.943,2.815-6.232,2.815-6.232l11.029,0.128c0,0,2.035,4.334,2.959,6.298
c0.922,1.965,2.877,2.644,3.924-0.024C49.974,47.064,52.423,45.969,42.057,37.732z M31.726,23.155
c-2.546-0.03-4.633-2.118-4.664-4.665c-0.029-2.547,2.012-4.587,4.559-4.558c2.546,0.029,4.634,2.117,4.663,4.664
C36.314,21.143,34.272,23.184,31.726,23.155z"/>
</svg></div><script type="text/javascript">var isMobile = ( navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('Android') != -1 );
(function($){var h=$.scrollTo=function(a,b,c){$(window).scrollTo(a,b,c)};h.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1,limit:true};h.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(e,f,g){if(typeof f=='object'){g=f;f=0}if(typeof g=='function')g={onAfter:g};if(e=='max')e=9e9;g=$.extend({},h.defaults,g);f=f||g.duration;g.queue=g.queue&&g.axis.length>1;if(g.queue)f/=2;g.offset=both(g.offset);g.over=both(g.over);return this._scrollable().each(function(){if(e==null)return;var d=this,$elem=$(d),targ=e,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([ -]=)?d (.d )?(px|%)?$/.test(targ)){targ=both(targ);break}targ=$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}$.each(g.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll' b,old=d[key],max=h.max(d,a);if(toff){attr[key]=toff[pos] (win?0:old-$elem.offset()[pos]);if(g.margin){attr[key]-=parseInt(targ.css('margin' b))||0;attr[key]-=parseInt(targ.css('border' b 'Width'))||0}attr[key] =g.offset[pos]||0;if(g.over[pos])attr[key] =targ[a=='x'?'width':'height']()*g.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(g.limit&&/^d $/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&g.queue){if(old!=attr[key])animate(g.onAfterFirst);delete attr[key]}});animate(g.onAfter);function animate(a){$elem.animate(attr,f,g.easing,a&&function(){a.call(this,e,g)})}}).end()};h.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll' c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client' c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);
$(function($){
var backToTopItem = $("#back-to-top");
backToTopItem.click(function(){
$.scrollTo(0,2500,{easing:'easeOutBounce'});
return false;
});
$(window).scroll(function(){
if($(window).scrollTop()>600){
backToTopItem.removeClass("hidden");
} else {
backToTopItem.addClass("hidden");
}
});
if(isMobile){
backToTopItem.hide();
}
});
</script>好啦，教程到此结束。
求懂CSS3的大神帮着改改图标颜色吧。
本文由 空空裤兜 发布在 空空裤兜，转载此文请保持文章完整性，并请附上文章来源（空空裤兜）及本页链接。
如果本文侵犯您和第三方权益，请联系我及时删除。
原文链接：https://cloud.tencent.com/developer/article/2232581
