部分特效需要jQuery的支持,并且版本需要在1.7.2以及更高,如果你的网页中没有添加jQuery库,请加入以下代码。
<script src="//lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
接下来我们添加BackTop显示的代码。(不包括特效,主要代码;可以自行修改)
下列代码添加在自己网页中的footer处即可。
注:请自行修改以下代码,并把图片文件储存在自己的服务器里自行调用。
<style type="text/css"> #backTop { background: url("http://i11.tietuku.cn/d4bf0eeb98e30f67.png") repeat scroll 0 0 rgba(0, 0, 0, 0); bottom: 0; cursor: pointer; display: none; height: 275px; margin-bottom: -80px; position: fixed; right: 0; transition: all 0.5s ease 0s; width: 120px; z-index: 9999; } #backTop:hover { background: url("http://i11.tietuku.cn/cd64baee111cb3e6.png") repeat scroll 0 0 rgba(0, 0, 0, 0); margin-bottom: 0; transition: all 0.5s ease 0s; } #backTop a { display: block; overflow: hidden; } </style><div id="backTop"><a href="javascript:;"></a></div>
接下来我们添加jQuery特效代码。(建议加至head处)
<script type="text/javascript"> $(function () { $("#backTop").hide(); $(window).scroll(function(){ if ($(window).scrollTop()>1000){ $("#backTop").fadeIn(1500); }else{ $("#backTop").fadeOut(1500); } }); $("#backTop").click(function(){ $("body,html").animate({scrollTop:0},1000); return false; }); }); </script>
以上代码中有显示速度、滑动速度以及显示BackTop的参数,可以自行修改。
代码出自Rin’s Blog