页面回到顶部的效果

关键词：position:fixed,scrollTop(垂直滚动条滚动的距离),onscroll事件,setInterval定时器,clearInterval清除定时器

HTML代码

<div id="box"></div>
<a id="backTop" href="javascript:"></a><!--采用a标签制作回到顶部按钮-->

 

　　

CSS代码

    *{
        margin:0;
        padding:0;
    }
    #box{
        width:1040px;
        height:3000px;
        margin:0 auto;
        background:url(QinShiMingYue.jpg) left top;
    }
    a#backTop{
        display:block;
        position:fixed;
        right:20px;
        bottom:20px;
        width:34px;
        height:34px;
        display:none;
        background:url(top.png) no-repeat  left top;
    }
    a#backTop:hover{
        background:url(top.png) no-repeat left -34px;
    }

 

JavaScript代码

    function $(id){
        return  document.getElementById(id);
    }
    window.onload=function(){
        var backTop=$("backTop");
        var timer=null;    //定时器
        var cHeight=document.documentElement.clientHeight || document.body.clientHeight;//获取视窗的高度
        var stopScroll=true;
        window.onscroll=function(){
            var sTop=document.documentElement.scrollTop || document.body.scrollTop;
            //显示回到顶部的按钮
            if( sTop>cHeight){
                backTop.style.display="block";
            }
            if(stopScroll ){
                clearInterval(timer);
            }
            stopScroll=true;
        }
        backTop.onclick=function(){
            timer=setInterval(function(){
                var sTop=document.documentElement.scrollTop || document.body.scrollTop;
                //隐藏回到顶部的按钮
                if( sTop<=cHeight){
                    backTop.style.display="none";
                }
                if( sTop==0){
                    clearInterval(timer);
                }
                else{
                    var speed=Math.floor(-sTop/5);
                    //改变scrollTop的值会触发onscroll事件
                    document.documentElement.scrollTop=sTop+speed;
                    document.body.scrollTop=sTop+speed;
                }
                stopScroll=false;//防止滚动在中途被停止
            },30);
        }
    }