1、首先，我们需要图片的支持，至少需要一张“置顶”的图片
2、然后，到网上找一张比较大的图片，到时直接多放几张到网页上就可模拟页面可滚动效果
<html>
<head>
<style type="text/css">
#scroll {
width: 62px;
height: 50px;
right: 50px;
bottom: 50px;
display: none;
cursor: pointer;
position: fixed;
background: url("goTop.png");
}
</style>
</head>
<body>
<div>
<img src="tangwei.jpg" />
<img src="tangwei.jpg" />
<img src="tangwei.jpg" />
<img src="tangwei.jpg" />
<img src="tangwei.jpg" />
<img src="tangwei.jpg" />
<img src="tangwei.jpg" />
<img src="tangwei.jpg" />
<img src="tangwei.jpg" />
<img src="tangwei.jpg" />
<img src="tangwei.jpg" />
<img src="tangwei.jpg" />
<img src="tangwei.jpg" />
<img src="tangwei.jpg" />
<img src="tangwei.jpg" />
</div>
<div id="scroll"></div>
</body>
<script type="text/javascript">
// 获取置顶对象
var obj = document.getElementById(‘scroll‘);
// 置顶对象点击事件
obj.onclick = function() {
var timer = setInterval(function() {
window.scrollBy(0, -50);
if (document.body.scrollTop == 0) {
clearInterval(timer);
};
}, 2);
}
// 窗口滚动检测
window.onscroll = function() {
obj.style.display = (document.body.scrollTop >= 300) ? "block" : "none";
}
</script>
</html>
代码不多也不难，耐心一点都可以读懂，不规范的请忽略，效果图如下：
原文：http://my.oschina.net/cobish/blog/300626