DOM对象--返回顶部的控件、

当滚动条超过一定范围，就出现返回顶部的控件。

html代码：

<input type="text" id="pos">
<button id="toTop">返回指定滚动条的位置</button>

style代码://返回顶部控件的样式.

#top{display: none;position: fixed;right: 0;bottom: 0;padding: 10px;background-color: #f00;color: #fff}

js代码：

<script>

//首先打印p标签事例

for(var i= 0;i<1000;i++){
            document.write('<p >我是一个p标签,排行老'+i+'</p>');
        }

//返回顶部控件的出现效果

        document.write('<span id="top">返回顶部</span>');

var btnToTop = document.getElementById('top');

window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
if(scrollTop>200){<span style="white-space:pre">			</span>//当滚动条位置>200px时,控件就出现或消失
btnTotop.style.display = 'block';
}else{
btnToTop.style.display = 'none';
}};

//设置返回顶部控件的点击效果

 btnToTop.οnclick=function(){
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var speed =1.2;
                var  timer = setInterval(function(){
                    scrollTop = parseInt(scrollTop/speed);<span style="white-space:pre">	</span>//控制上移动的速度,每次调用都除以1.2,
                    if(scrollTop <10){<span style="white-space:pre">			</span>//
                        clearInterval(timer);
                        btnToTop.style.display = 'none';
                        scrollTop = 0;
                    }//<span style="font-family: Arial, Helvetica, sans-serif;">就将scrollTop的值赋值回去,那就scrollTop不断移动向上.</span>
                    document.body.scrollTop = document.documentElement.scrollTop = scrollTop;
                },30);
            }
        }

//输入框控制scrollTop

 window.onload = function(){
            var pos =document.getElementById('pos');
            var btn = document.getElementById('toTop');

            btn.onclick = function(){
                var top = pos.value;
                document.body.scrollTop =document.documentElement.scrollTop = top;
            }

</script>

总结:主要通过scrollTop()获取其滚动条的垂直偏移,控制控件的出现和消失.

通过setInterval()每次运行使scrollTop不断缩小，达到了向上移动的效果。

2、移动的小圆圈

通过一个按钮移动一个圆圈，再次按动就停止移动。

html代码：

<button id="btn">移动</button>
<div id="ball"></div>

style代码：//设置一个圆体

<style>
#ball { position:absolute;top:50px;left:100px;
width:50px;heigth:50px;background-color:red;
border-radius:50%;}
</style>

js代码：

<script>

window.onload = function(){
var btn = document.getElementById('btn');
var ball = document.getElementById('ball');

var left = 100;
var timer;

var isStart = 0;

btn.onclick = function(){
if(isStart ==1){
clearInterval(timer);

isStart =0;<span style="white-space:pre">	</span>//用来佐断圆的动和静

}
else{

isStart = 1;
timer = setInterval(function(){
left++;
ball.style.left = left+'px';
},15);
}
}}

</script>