回到顶部

回到顶部效果的方法总结

---

js原生实现

<a href="javascript:void(0)" id='top'>回到顶部</a>
思路：利用scrollTop属性
    document.getElementById('top'); // 获取到元素
    onclick()  // 绑定事件
    window.onscroll=function(){}   //负责监听
    // 获取到scrollTop值 ，考虑兼容性
    document.body.scrollTop(谷歌)||document.documentElement.scrollTop（IE）; 
    // 定时器
    setTimeout(); clearTimeout();
步骤：
    var bTop=document.getElementById('top'); 
    window.onscroll=function(){
        var offsetY=document.body.scrollTop||document.documentElement.scrollTop;
        if(offsetY>200){
            bTop.style.display='block';
        }else{
            bTop.style.display='none';
        }
    };
    bTop.onclick=backTop;
    function backTop(){
        var topValue=document.body.scrollTop||document.documentElement.scrollTop;
        if(topValue==0){
            clearTimeout(timer);
            timer=null;
        }else{
            window.scrollBy(0,-20);
           var timer=setTimeout(backTop,10);
        }
    }

---

jqury实现---相对简单多了

<a href="javascript:void(0)" id='bTop'>回到顶部</a>
思路：
    利用scrollTop()方法---获取或者设置垂直距离的偏移量
步骤:
    // 让a元素显示
    $(window).scroll(function(){
        var offsetY=$(document.body)||$(document.documentElement).scrollTop();
        if(offsetY>200){
            bTop.style.display='block';
        }else{
            bTop.style.display='none';
        }
    });
    //回到顶部的动画效果
    $('#bTop').click(function(){
        var offsetY=$(window).scrollTop();
       var timer=setInterval(function(){
            if(offsetY==0){
                clearInterval(timer);
            }else{
                offset-=10;
                $(window).scrollTop(offsetY);
            }
        },10)
    })

还有一种超级好用的用jQuery实现的方法，那就是、那就是、那就是---animate()

<a href="javascript:void(0)" id='bTop'>回到顶部</a>
   // 让a元素显示
    $(window).scroll(function(){
        var offsetY=$(document.body)||$(document.documentElement).scrollTop();
        if(offsetY>200){
            bTop.style.display='block';
        }else{
            bTop.style.display='none';
        }
    });
    // animate()实现回到顶部
    $('#bTop').click(function(){
     $(document.body).aniamte({'scrollTop':0},1000);
    });
   

说明：animate()属于jQuery对象的方法，animate的第一个参数包括的不仅仅是CSS，它涵盖了所有可以用数值来表示的window属性值（scrollTop...）以及dom的CSS属性值（width、height、top..）。