Jquery插件-返回顶部

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(images/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="images/totop.gif"/>'

offsetx : 25,// 回到顶部 right 偏移位置

offsety : 25,// 回到顶部 bottom 偏移位置

});

});

</script>

更多资讯请移步路人甲技术交流http://www.walkerjava.com