每天一个效果：（9）返回首屏功能_网页设计单击字体打开网页并能返回主页-CSDN博客

本文链接：https://blog.csdn.net/liuyang___/article/details/123958666

我们经常会看到一个效果，就是页面往下滑，过一会，会有一个返回按钮，然后点击返回，直接返回到第一个屏幕的位置。我们今天就来做这个效果吧。

我们来看一下html和css代码

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .content {
            height: 2000px;
        }
        .gotop {
            width: 100px;
            height: 100px;
            background-color: #bbb;
            text-align: center;
            line-height: 100px;
            position: fixed;
            bottom: 100px;
            right: 20px;
            display: none;
        }
    </style>
<body>
    <div class="content">
        <h2>返回首屏</h2>
        <div class="gotop">返回</div>
    </div>
    <script></script>
</body>

我们再来看一下效果

下面我们来梳理一下逻辑：

1.当用户滑动滚动条时，达到400px时，返回按钮要显示出来，反之，小于400px时，要进行隐藏。

2点击返回按钮时滚动条返回原位和按钮继续隐藏。

来看js代码

    <script>
        //逻辑：1.当用户滑动滚动条时，达到400px时，返回按钮要显示出来，反之，小于400px时，要进行隐藏
        // 2.点击返回按钮时   滚动条返回原位和按钮继续隐藏
        let gotop = document.getElementsByClassName('gotop')[0];
        //滚动事件   
        window.onscroll = function(){
            //一个是获取body，一个是获取html,这个是为了让浏览器兼容
            let res = document.body.scrollTop || document.documentElement.scrollTop;
            console.log(res);
            if(res>=400) {
                gotop.style.display = 'block';
            }
            else {
                gotop.style.display = 'none';
            }
        }
        gotop.onclick = function(){
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }
    </script>

看一下最终效果