js中带运动的返回顶部以及锚点的使用

本博主要介绍使用js实现从底部返回顶部的方法（返回底部的过程中速度不断变慢），由于其和锚点很相似，所以也就顺便在后面将锚点的相关知识进行总结

html代码

<a id="a1">返回顶部</a>

css代码

<style>
        body{height:3000px;}
        #a1{width:50px; height:50px;display:block; border-radius:50%; background:red; position:fixed; bottom:0; right:0; font-size:10px; color:white; line-height:50px; text-align:center;}

script>
        window.onload = function(){
            var oA = document.getElementById('a1');
          var iCur = iSpeed = 0;
            var iTimer = null;
            var b=0;
window.onscroll = function(){
    if(b!=1){
        clearInterval(iTimer);//如果b=1,说明scroll是定时器触发的，如果b不等于1，说明是由非定时器的其他操作触发的
    }
    b=2;
}
                oA.onclick = function() {
                    clearInterval(iTimer);
                    iTimer = setInterval(function () {
                        iCur = document.documentElement.scrollTop || document.body.scrollTop;//得出滚动条此时所在的位置
                        iSpeed = Math.floor((0 - iCur) / 8);//计算出滚动条的速冻

                        if (iCur != 0) {
                            document.documentElement.scrollTop = document.body.scrollTop = iCur + iSpeed ;//切记不要带单位，因为通过dom计算的数值本来就不带单位
                        } else {
                            clearInterval(iTimer);
                        }
                        b = 1;
                    }, 30);
  }
        }
    </script>

此种带缓冲的返回顶部的方法，主要运用定时器的方法实现滚动条位置的不断变化，缓冲运动的原理是距离目标点越近速度越小，距离目标点越远，速度越大，所以采用的是用目标点的位置减去此时的位置，然后乘以一个大于0小与1的数字，最后再整体取整（如果目标点比初始点大，就向上取整，如果目标点比初始点小就向下取整，而返回顶部的时候肯定是初始点比目标点小，所以要向下取整）。其他理解点都写在注释里面了

下面进行锚点知识的总结

1. 锚点跳转简介

锚点其实就是可以让页面定位到某个位置上的点。在高度较高的页面中经常见到。

锚点跳转有两种形式：

• a标签 + name / href 属性
• 使用标签的id属性

HTML代码

<a name="#top"><a/>

锚点使用

第一种使用：name/href

<a href="#top">点击跳转到顶部</a>

第二种：使用id标签

window.location.href="#top";

不建议使用window.location.hash="#top";的方法，因为经测试，此种方法只有在第一次时有效，后面再点击就无效了（即便刷新也无效，因为url地址已经改变了），而使用window.location.href="#top";一直有效