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