1.引入jQuery类库及插件库，效果及插件请看附件
<script type="text/javascript" src="js/jQuery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.scrolltotop.js"></script>
2.样式控制
<style type="text/css">
/* 返回top样式*/
.totop {
width: 40px;
height: 35px;
line-height: 35px;
font-size: 12px;
overflow: hidden;
}
.totop a {
display: block;
width: 40px;
height: 35px;
background: url(p_w_picpaths/totop.gif) no-repeat;
text-indent: -9999px;
text-decoration: none;
}
.totop a:hover {
background-position: 0 -35px;
}
</style>
3.body内容
<div style="margin-top:200px;text-align:center;height:1000px;background-color:#cccccc;">
这是body内容,滚动滚动条，请看右下角。
</div>
4.JS控制出现返回顶部图片
<script type="text/javascript">
$(function($){
// 返回顶部
$.scrolltotop({
className: 'totop',
// controlHTML : '<a href="javascript:;">回到顶部↑</a>',
// 此处可以换成下面的图片格式
// controlHTML : '<img title="返回顶部" src="p_w_picpaths/totop.gif"/>'
offsetx : 25,// 回到顶部 right 偏移位置
offsety : 25,// 回到顶部 bottom 偏移位置
});
});
</script>
更多资讯请移步路人甲技术交流http://www.walkerjava.com
