【JS实现回到顶部功能】

JS实现回到顶部功能

效果图如下，单击右下角的“回到顶部”粉色盒子，使滚动条以动画形式匀速滚动上去，可以设置滚动的速度等等。

body部分：
俩个div盒子

<div class="header">顶部通栏</div>
<div class="goTop">回到顶部</div>

style样式：

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

        body {
            height: 3000px;
        }

        .header {
            width: 100%;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            color: #fff;
            background-color: skyblue;

            transition: top .5s linear;

            position: fixed;
            top: -80px;
            left: 0;
        }

        .goTop {
            width: 50px;
            height: 50px;
            background-color: pink;
            font-size: 20px;
            text-align: center;
            line-height: 25px;
            color: #fff;
            position: fixed;
            bottom: 50px;
            right: 50px;
            display: none;
            cursor: pointer;
        }
</style>

JavaScript部分：

<script>
        //1、获取元素
        var header = document.querySelector('.header')
        var goTop = document.querySelector('.goTop')

        //2、绑定滚动事件
        window.onscroll = function () {
            //2-1，获取浏览器卷去的高度
            var height = document.documentElement.scrollTop || document.body.scrollTop

            //2-2，判断卷去的高度
            if (height >= 300) {
                //显示
                header.style.top = '0px'
                goTop.style.display = 'block'
            } else {
                //隐藏
                header.style.top = '-80px'
                goTop.style.display = 'none'
            }
        }
        //3，绑定点击事件
        goTop.onclick = function () {
            //3-1，让页面滚动回到顶部
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            })
        }
</script>