每天一个js小demo---返回顶部

1、效果展示：


当点击返回顶部的时候，会动画一样慢慢的滑动到顶部，而不是一下子返回到顶部。

2、直接上代码。
html:

 <div class="contain">
        <div class="left">
            <div class="head s">
                头部区域
            </div>
            <div class="bann s">
                区域
            </div>
            <div class="content s">
                主体部分
            </div>
        </div>
        <div class="right">
            <div class="top">
                <span class='goback'>返回顶部</span>
            </div>
        </div>

    </div>

css:

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .contain {
        display: flex;

    }

    .left {
        width: 800px;
    }

    .head {
        width: 80%;
        height: 200px;
        background-color: green;

    }

    .bann {
        width: 80%;
        height: 400px;
        background-color: yellow;

    }

    .content {
        width: 80%;
        height: 1500px;
        background-color: red;

    }

    .s {
        margin-bottom: 10px;
    }

    .top {
        width: 100px;
        height: 100px;
        background-color: pink;
        top: 360px;
        position: absolute;
    }

    .goback {
        display: none;
    }
</style>

js:

//1、先获取元素
	   var slider = document.querySelector('.top');
        var ban = document.querySelector('.bann')
        var spa = document.querySelector('span')
        var content = document.querySelector('.content');
        var goback = document.querySelector('.goback')
    
 //定义变量
   var sliderTop = slider.offsetTop - ban.offsetTop; // 获得侧边栏到顶部的距离
   var contentTop = content.offsetTop;；  //获取content到顶部的距离
   
  
 //2、注册事件
  document.addEventListener('scroll', function () {
            //window.pageYOffset:头部卷入的大小
            // console.log(window.parseInt(pageYOffset));
            //1、当banner到顶部的时候侧边栏固定
            if (window.parseInt(pageYOffset) >= bt) {
                slider.style.top = sliderTop + 'px'
                slider.style.position = 'fixed'
                spa.display = 'block'
            } else {
                slider.style.position = 'absolute'
                slider.style.top = 360 + 'px'
            }
            //2、当content到顶部的时候显示返回顶部的文字
            if (window.parseInt(pageYOffset) >= contentTop) {
                goback.style.display = 'block'
            } else {
                goback.style.display = 'none'
            }

        })
       
3、当点击返回顶部的时候返回顶部
goback.addEventListener('click', function () {
            //因为是窗口滚动，所以对象是window
            animation(window, 0)
        })

4、引入之前封装好的缓动动画
//4、引入缓动动画来实现点击返回顶部的时候，能够动画的缓慢的返回顶部，而不是一下子跳到顶部
        function animation(obj, target, callback) { //调用的时候用callback()
            clearInterval(obj.timer) //清除之前的定时器，只保留一个定时器
            obj.timer = setInterval(function () {
                //1、把步长值写道定时器中
                // var step = Math.ceil((target - obj.offsetLeft) / 10  )//向上取整
                //加一个判断，解决后退的时候能够准确到达位置
                var step = (target - window.pageYOffset) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step)
                //加个判断条件，让它停下来
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer)
                    //3、当定时器结束的时候判断这个回调函数有没有传进来，有的话就执行这个回调函数
                    // if(callback){
                    // callback()

                    // }
                    callback && callback() //等同于上面的代码  意思是当callback为真的话就执行callback()，否则不执行
                } else {
                    //2、每次加1  这个步长值改为一个慢慢变小的值
                    window.scroll(0,window.pageYOffset + step)
                }
            }, 30)
        }

好了，这样就可以实现上面的效果，但是还有一个问题就是当我点击返回顶部的时候，返回到了顶部，当我再往下滑动的时候还是一直保持返回顶部的状态，拉不下来，只有刷新一次之后，才能重新实现返回顶部，各位小伙伴能帮忙看看是什么原因吗？