js之滚动置顶效果

浏览数：44 / 时间：2015年06月09日

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>

代码不多也不难，耐心一点都可以读懂，不规范的请忽略，效果图如下：