HTML 返回顶部功能实现

1.首先设置一个返回顶部的标签

<div id="totop">
        <a href="javascript:;" id="btn">顶部</a>
</div>

 如果设置href="#"的话,超链接会自动存在一个瞬间返回顶部的功能，这里为了有效果的返回顶部，我们设置引入一个空脚本

2.在body添加脚本

<script type="text/javascript">
        window.onload = function () {
            // 1.找到页面中的按钮
            var totop = document.getElementById("btn");
            totop.style.display ="none";
            var timer = null;

            // 2. 给按钮绑定点击事件
            totop.onclick =function () {
                // 周期性定时
                timer = setInterval(function () {
                    // 3.获取滚动条距离浏览器顶端的距离
                    var backTop = document.documentElement.scrollTop || 
                    document.body.scrollTop;

                    // 越滚越慢
                    speedTop =backTop/5;
                    document.documentElement.scrollTop=backTop-speedTop;
                    if(backTop==0){
                        clearInterval(timer);
                    }
                },30)
            }
            // 设置临界值
            var pageHeight =700;
            window.onscroll =function () {
                var backTop = document.documentElement.scrollTop || 
                document.body.scrollTop;
                if(backTop>pageHeight){
                    totop.style.display="block";
                }else{
                    totop.style.display="none";
                }

            }
        }

    </script>